原生js简易版轮播图实现

原生js简易版轮播图实现

利用原生js手写了一个简易版的轮播图，主要用到了定时器控制元素的显隐切换，非常简单

本文代码主要是控制了图片的透明度来实现的，也可以通过控制display: none | block来实现

效果视频

html部分

<div class="swiper">
    <!-- img就是要切换的图片 -->
    <img src="./imgs/1.jpg" alt="" class="active">
    <img src="./imgs/2.jpg" alt="">
    <img src="./imgs/3.jpg" alt="">
    <img src="./imgs/4.jpg" alt="">
    <img src="./imgs/5.jpg" alt="">
    <img src="./imgs/6.jpg" alt="">
    <img src="./imgs/7.jpg" alt="">
    <img src="./imgs/8.jpg" alt="">
    <!-- a标签就是轮播图下的小圆点 -->
    <div class="btns">
        <a href="" class="on"></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>
</div>

css部分

.swiper {
    width: 590px;
    height: 470px;
    margin: 0 auto;
    position: relative;
}

img {
    opacity: 0;
    width: 590px;
    height: 470px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s ease-out;
}

		/* 想要通过display的方法实现的话，只需要将下面的的opacity: 1改成display: block和上面img的样式中的定位相关删除并且将opacity: 0改成display: none。只不过这样没有动画过渡效果 */

/* 重点：通过添加或移除图片的active类名控制显示隐藏 */
img.active {
    opacity: 1; 
}

.btns {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 10px;
}

.btns a {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 1px;
    box-sizing: border-box;
}

/* 重点：通过添加或移除按钮的on类名控制选中样式 */
.btns .on {
    background-color: #fff;
    border: 2px solid #ccc;
}

js部分

// 获取所有需要切换的元素
let img = document.querySelectorAll("img");
// 获取底部所有的按钮
let a = document.querySelectorAll("a");
// 定义一个变量，给下面定时器做准备
var timer;
// 定义一个初始值，让第一张图片先显示出来
let count = 0;
// 页面一加载就启动轮播函数
run();

// 让定时器运行的函数
function run() {
    // 定义定时器，间隔时间循环播放
    timer = setInterval(function () {
        // 循环遍历将所有的图片隐藏和按钮激活样式取消
        for (let i = 0; i < img.length; i++) {
            img[i].className = "";
            a[i].className = "";
        }
        // 先让count++，因为定时器有延时效果，在延时时间里显示的就是第一张图片，延时后要显示第二张
        count++;
        // 如果count等于了图片总数，也就是轮播到了最后一张，就让count重新等于0，从第一张开始继续循环
        if (count == img.length) {
            count = 0;
        }
        // 给对应的图片添加active类名将其显示，按钮添加on类名，添加选中样式
        img[count].className = "active";
        a[count].className = "on";
    }, 1500)
}

// 这里用forEach也可以
for (let i = 0; i < img.length; i++) {
    // 给每一个按钮添加鼠标移入事件
    a[i].addEventListener("mouseover", function () {
        // 循环遍历将所有的图片隐藏和按钮激活样式取消
        for (let i = 0; i < img.length; i++) {
            img[i].className = "";
            a[i].className = "";
        }
        // 再给移入的按钮对应下标的图片进行显示，因为active类名就是控制图片显示的
        img[i].className = "active"
        // 对应的按钮页添加激活样式
        a[i].className = "on";
        // 移入到按钮上时，清除定时器，让轮播图停止播放
        clearInterval(timer);
    })
    // 给每一个按钮添加鼠标移出事件
    a[i].addEventListener("mouseout", function () {
        // 重新启动定时器
        run();
        // 让定义的初始值为鼠标移出时按钮的下标，这样就能让图片从移入的按钮对应图片的下一张播放，否则每次移出都会从第一张开始
        count = i;
    })
    // 鼠标移入移出图片事件
    img[i].addEventListener("mouseover", function () {
        // 移入图片清除定时器，停止轮播
        clearInterval(timer);
    })
    img[i].addEventListener("mouseout", function () {
        // 移出重新启动定时器继续轮播
        run();
    })
}