利用Javascript制作轮播图最终版--滑动效果

JS最快速度制作滑动效果的轮播图

前面几篇博客一直在讲轮播图的制作，这篇博客是最终版，实现轮播图的滑动效果。如图：

HTML代码：

    <div class="box" id="box">
        <ul class="min_box" id="banner">
            <li class="banner"></li>
            <li class="banner"></li>
            <li class="banner"></li>
            <li class="banner"></li>
            <li class="banner"></li>
            <li class="banner"></li>
        </ul>
        <div class="btn btn_l">&lt;</div>
        <div class="btn btn_r">&gt;</div>
        <ul class="points">
            <li class="red blue"></li>
            <li class="red"></li>
            <li class="red"></li>
            <li class="red"></li>
        </ul>
    </div>

CSS代码：

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .box {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border: 20px yellow solid;
            overflow: hidden;
        }
        
        img {
            width: 500px;
            height: 300px;
        }
        
        .btn,
        .points {
            position: absolute;
            cursor: pointer;
        }
        
        .btn {
            width: 20px;
            height: 40px;
            background: green;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            top: 50%;
            margin-top: -20px;
            z-index: 999;
        }
        
        .btn_l {
            left: 0;
        }
        
        .btn_r {
            right: 0;
        }
        
        .points {
            width: 100px;
            height: 20px;
            border-radius: 20px;
            background: skyblue;
            left: 50%;
            margin-left: -50px;
            bottom: 30px;
        }
        
        .points .red {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            float: left;
            margin: 2.5px 5px;
        }
        
        .points li.blue {
            background: blue;
        }
        
        .min_box {
            width: 3000px;
            height: 300px;
            background: skyblue;
            position: absolute;
            top: 0px;
            left: -500px;
        }
        
        .min_box .banner {
            width: 500px;
            height: 300px;
            float: left;
        }
        
        .min_box .banner:nth-of-type(2),
        .min_box .banner:nth-of-type(6) {
            background: url("../0602/img/2.jpg");
        }
        
        .min_box .banner:nth-of-type(3) {
            background: url("../0602/img/3.jpg");
        }
        
        .min_box .banner:nth-of-type(4) {
            background: url("../0602/img/4.jpg");
        }
        
        .min_box .banner:nth-of-type(1),
        .min_box .banner:nth-of-type(5) {
            background: url("../0602/img/1.jpg");
        }

JS代码：

    // 1.获取元素
    var oBtn_l = document.getElementsByClassName('btn_l')[0];
    var oBtn_r = document.getElementsByClassName('btn_r')[0];
    var aLi = document.getElementsByClassName('red');
    var oBox = document.getElementById('box');
    var oBanner = document.getElementById('banner');

    var liIndex = 0;
    var picIndex = 1;
    var timer;

    function clear() {
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].className = 'red';
        }
        aLi[liIndex].className = 'red blue';
    }
    // 右键点击事件
    oBtn_r.onclick = function() {
        next();
    };

    function next() {
        picIndex++;
        liIndex++;
        liIndex = liIndex === aLi.length ? 0 : liIndex;
        oBanner.style.left = -(picIndex * 500) + 'px';
        oBanner.style.transition = 'all 0.3s ease';
        if (picIndex === 5) {
            picIndex = 1;
            setTimeout(() => {
                oBanner.style.left = '-500px';
                oBanner.style.transition = 'unset';
            }, 300);
        }
        clear();
    }
    // 左键点击事件
    oBtn_l.onclick = function() {
        picIndex--;
        liIndex--;
        liIndex = liIndex === -1 ? aLi.length - 1 : liIndex;
        oBanner.style.left = -(picIndex * 500) + 'px';
        oBanner.style.transition = 'all 0.3s ease';
        if (picIndex === 0) {
            picIndex = 4;
            setTimeout(() => {
                oBanner.style.left = '-2000px';
                oBanner.style.transition = 'unset';
            }, 300);
        }
        clear();
    };

    // 四个点
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].a = i;
        aLi[i].onclick = function() {
            picIndex = this.a + 1;
            liIndex = this.a;
            oBanner.style.left = -(picIndex * 500) + 'px';
            oBanner.style.transition = 'all 0.3s ease';
            clear();
        };
    }

    // 添加定时器
    timer = setInterval(next, 1000);

    // 鼠标移入时，清除定时器
    oBox.onmouseover = function() {
        clearInterval(timer);
    }

    // 鼠标移出时
    oBox.onmouseout = function() {
        timer = setInterval(next, 1000);
    }

总结： 给轮播图添加滑动效果主要在于让小盒子在切换位移时加上过渡的时间。同时利用障眼法，在图片的首尾再添加上图片。

当然，这个只是一些平时练习的时候搞一搞，熟悉了里边的原理，真正工作时使用轮播图插件即可。不如swiper.js。