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

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

* {
            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");
        }

// 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();};functionnext(){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);}