首页 > 文章 > web前端 > javascript轮播图怎么实现

javascript轮播图怎么实现

WBOY原创: 2023-05-26 19:20:061793浏览

随着前端开发技术的不断发展，JavaScript 已经成为了前端开发中不可或缺的一部分。在网页设计中，轮播图是一种非常常见的展示方式，它可以帮助网站更好地呈现出图片、文字等多种内容。本文将介绍如何使用 JavaScript 实现一个简单的轮播图。

一、HTML 布局

首先，我们需要构建轮播图的 HTML 布局。这里采用较为简单的 HTML 和 CSS 方式创建一个轮播图容器，如下所示：

<div class="slider">
    <ul class="slider-items">
        <li class="slider-item"><img src="1.jpg"></li>
        <li class="slider-item"><img src="2.jpg"></li>
        <li class="slider-item"><img src="3.jpg"></li>
    </ul>
</div>

其中，.slider 表示轮播图容器，.slider-items 表示轮播图项容器，.slider-item 表示单个轮播图项。我们需要在 .slider-items 中设置 left 属性，以便在 JavaScript 中控制轮播图项的移动。

二、JS 实现轮播

1.获取元素

要实现轮播图，首先需要获取需要操作的元素节点，这里我们定义一个数组 items，用来储存轮播图项，并通过 querySelectorAll() 方法获取 slider-item 类，代码如下：

var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];

for (var i = 0; i < sliderItems.length; i++) {
    items.push(sliderItems[i]);
}

2.设置相关参数

在实现轮播图的过程中，我们需要设置相关的参数，例如当前选中的项，轮播图的宽度，设定最后一项与第一项之间进行过渡等。代码如下：

var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';

3.实现轮播图

接下来，我们可以使用 JavaScript 实现轮播图。具体过程为：

（1）创建 startSlide 函数和 slideLeft 函数。

startSlide()：用来开始轮播图。在函数中定义了比当前选中项的下一项，如果当前项为最后一项，则将下一项设置为第一项，并通过 setInterval() 方法进行轮播图循环播放；
slideLeft()：用来向左进行轮播。在函数中使用了 animate() 方法进行动画过渡，完成轮播效果。

function startSlide() {
    interval = setInterval(function () {
        slideLeft();
    }, pause);
}

function slideLeft() {
    if (current === imgCount - 1) {
        current = -1;
    }
    current++;
    animate(sliderContainer, -width * current, animationSpeed);
}

（2）创建 animate 函数，用来实现动画效果。函数中通过 requestAnimationFrame() 方法实现了动画的流畅过渡，从而达到更好的轮播效果。

function animate(el, left, speed) {
    var start = el.offsetLeft;
    var destination = left;
    var startTime = new Date().getTime();
    var distance = destination - start;

    function frame() {
        var elapsedTime = new Date().getTime() - startTime;
        var position = easeInOutQuart(elapsedTime, start, distance, speed);
        el.style.left = position + 'px';
        if (elapsedTime < speed) {
            requestAnimationFrame(frame);
        }
    }
    frame();
}

（3）创建缓动函数 easeInOutQuart，用来优化动画效果。

function easeInOutQuart(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

（4）最后，我们仍需在 JavaScript 中添加轮播图的控制功能。这里我们通过 addEventListener() 方法添加了 mouseenter 和 mouseleave 事件，用来在鼠标移入和移出时暂停和开始轮播。完整的代码如下：

slider.addEventListener('mouseenter', function () {
    clearInterval(interval);
});

slider.addEventListener('mouseleave', function () {
    startSlide();
});

startSlide();

三、完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript轮播图实现</title>
    <style>
        .slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .slider-items {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .slider-item {
            display: inline-block;
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="slider-items">
            <li class="slider-item"><img src="1.jpg"></li>
            <li class="slider-item"><img src="2.jpg"></li>
            <li class="slider-item"><img src="3.jpg"></li>
        </ul>
    </div>
    <script>
        var slider = document.querySelector('.slider');
        var sliderItems = document.querySelectorAll('.slider-item');
        var items = [];

        for (var i = 0; i < sliderItems.length; i++) {
            items.push(sliderItems[i]);
        }

        var current = 0;
        var width = 600;
        var height = 400;
        var imgCount = items.length;
        var animationSpeed = 1000;
        var pause = 3000;
        var interval;
        var sliderContainer = document.querySelector('.slider-items');
        sliderContainer.style.width = width * items.length + 'px';
        sliderContainer.style.height = height + 'px';

        function startSlide() {
            interval = setInterval(function () {
                slideLeft();
            }, pause);
        }

        function slideLeft() {
            if (current === imgCount - 1) {
                current = -1;
            }
            current++;
            animate(sliderContainer, -width * current, animationSpeed);
        }

        function animate(el, left, speed) {
            var start = el.offsetLeft;
            var destination = left;
            var startTime = new Date().getTime();
            var distance = destination - start;

            function frame() {
                var elapsedTime = new Date().getTime() - startTime;
                var position = easeInOutQuart(elapsedTime, start, distance, speed);
                el.style.left = position + 'px';
                if (elapsedTime < speed) {
                    requestAnimationFrame(frame);
                }
            }
            frame();
        }

        function easeInOutQuart(t, b, c, d) {
            if ((t /= d / 2) < 1) 
                return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }

        slider.addEventListener('mouseenter', function () {
            clearInterval(interval);
        });

        slider.addEventListener('mouseleave', function () {
            startSlide();
        });

        startSlide();
    </script>
</body>
</html>

四、总结

到此，我们已经完成了 JavaScript 实现轮播图的全部代码。通过以上示例，我们可以了解到使用 JavaScript 实现轮播图的具体过程，实现了一个简单且易于理解的轮播图，掌握了 JavaScript 实现轮播图的操作方法。希望本文能帮助大家进一步掌握 JavaScript 前端开发技术。

以上是javascript轮播图怎么实现的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html 循环 JS 事件

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：简述JavaScript具体处理过程下一篇：JavaScript如何让人物跳跃

查看更多