原生JS实现的轮播图功能详解

现在我来详细为你讲解“原生JS实现的轮播图功能详解”的完整攻略，内容如下：

确定结构

在开始实现轮播图之前，首先要确定轮播图的结构，建议采用以下结构：

<div class="carousel">
    <ul class="carousel-list">
        <li class="carousel-item"><img src="1.jpg"></li>
        <li class="carousel-item"><img src="2.jpg"></li>
        <li class="carousel-item"><img src="3.jpg"></li>
        <li class="carousel-item"><img src="4.jpg"></li>
        <li class="carousel-item"><img src="5.jpg"></li>
    </ul>
</div>

其中，.carousel用于包裹轮播图的容器，.carousel-list用于包裹轮播图的所有项（即li元素），.carousel-item用于表示每一个轮播图项。

CSS样式

在确定好结构后，再通过CSS样式来优化轮播图的显示效果和样式。

.carousel {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.carousel-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.carousel-item {
    float: left;
    width: 100%;
    height: 100%;
    text-align: center;
}
.carousel-item img {
    max-width: 100%;
    max-height: 100%;
}

上述样式主要用于定义容器和各个元素的排列和显示方式，同时为了保证在图片尺寸不同时也能够正常显示，加入了max-width和max-height属性。

JS实现

接下来是轮播图实现的重头戏，需要用到JavaScript来控制轮播图的自动播放和手动切换。

(function() {
    // 获取DOM元素
    var carousel = document.querySelector('.carousel');
    var list = document.querySelector('.carousel-list');
    var items = document.querySelectorAll('.carousel-item');
    var dots = []; // 圆点数组

    // 创建圆点
    for (var i = 0; i < items.length; i++) {
        var dot = document.createElement('span');
        dot.setAttribute('index', i); // 用于记录圆点对应轮播项的索引
        dot.className = 'dot';
        carousel.appendChild(dot);
        dots.push(dot);
    }

    var index = 0; // 当前轮播的项的索引
    var timer = null; // 定时器
    var interval = 3000; // 切换间隔

    // 定义切换函数
    function slideTo(newIndex) {
        // 先更新索引
        index = newIndex;

        // 在实现切换动画
        var offset = -index * items[0].offsetWidth;
        list.style.transform = 'translateX(' + offset + 'px)';

        // 更新圆点状态
        for (var i = 0; i < dots.length; i++) {
            dots[i].className = 'dot';
        }
        dots[index].className = 'dot active';
    }

    // 自动轮播函数
    function autoSlide() {
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            if (index >= items.length) {
                index = 0;
            }
            slideTo(index);
        }, interval);
    }

    // 前进和后退按钮
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    prev.onclick = function() {
        index--;
        if (index < 0) {
            index = items.length - 1;
        }
        slideTo(index);
    };
    next.onclick = function() {
        index++;
        if (index >= items.length) {
            index = 0;
        }
        slideTo(index);
    };

    // 圆点点击事件
    for (var i = 0; i < dots.length; i++) {
        dots[i].onclick = function() {
            var newIndex = parseInt(this.getAttribute('index'));
            slideTo(newIndex);
        };
    }

    // 鼠标移到轮播图上时，停止自动播放
    carousel.onmouseover = function() {
        clearInterval(timer);
    };
    // 鼠标移出轮播图时，重新开始自动播放
    carousel.onmouseout = function() {
        autoSlide();
    };

    // 开始自动轮播
    autoSlide();
})();

上述JS代码主要实现了以下内容：

获取DOM元素，包括容器、轮播项、圆点等。
创建圆点数组，通过遍历轮播项的方式来创建。
定义slideTo函数用来切换轮播项，其中包括更新当前项索引、实现切换动画和更新圆点状态三部分。
定义autoSlide函数用来自动轮播，设置定时器，每隔一定时间调用slideTo函数。
给前进和后退按钮添加事件，通过修改当前项的索引调用slideTo函数实现。
给圆点添加点击事件，通过获取对应轮播项的索引调用slideTo函数实现。
给轮播图容器添加鼠标移入和移出事件，分别用来停止和开始自动轮播。
最后调用autoSlide函数开始轮播。

示例说明

下面给出两条轮播图示例说明：

示例一

假设有以下结构：

<div class="carousel">
    <ul class="carousel-list">
        <li class="carousel-item"><img src="1.jpg"></li>
        <li class="carousel-item"><img src="2.jpg"></li>
        <li class="carousel-item"><img src="3.jpg"></li>
    </ul>
    <span class="prev">Prev</span>
    <span class="next">Next</span>
</div>

此时需要在<head>标签中引入上述CSS样式和JS代码，即可实现一个左右切换的轮播图。

示例二

现在需要一个自动轮播的轮播图，并且需要添加圆点来表示当前显示的项。结构如下：

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

此时可以采用上述CSS样式和JS代码，不过需要对其中的.prev和.next样式进行修改，以便去掉前进和后退按钮。同时在JavaScript代码中不需要再设置前进和后退按钮的点击事件，而是通过创建圆点并添加点击事件实现切换。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现的轮播图功能详解 - Python技术站

原生JS实现的轮播图功能详解

确定结构

CSS样式

JS实现

示例说明

示例一

示例二

相关文章