利用JavaScript的控制图片的CSS位置实现轮播图功能

<divclass="box"id="box"><ulclass="min_box"id="banner"><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: 2000px;
            height: 300px;
            background: skyblue;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .min_box .banner {
            width: 500px;
            height: 300px;
            float: left;
        }
        .min_box .banner:nth-of-type(1){
            background: url('img/1.jpg') no-repeat center/100% 100%;
        }
        .min_box .banner:nth-of-type(2){
            background: url('img/2.jpg') no-repeat center/100% 100%;
        }
        .min_box .banner:nth-of-type(3){
            background: url('img/3.jpg') no-repeat center/100% 100%;
        }
        .min_box .banner:nth-of-type(4){
            background: url('img/4.jpg') no-repeat center/100% 100%;
        }

// 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 index = 0;
    var timer;
    function clear() {
        for (var i = 0; i <aLi.length;i++){aLi[i].className = "red"}aLi[index].className = "red blue";}//右键点击事件oBtn_r.onclick = function(){next();}functionnext(){index ==3?index = 0:index++;oBanner.style.left = -(index*500)+"px";clear();}//左键点击事件oBtn_l.onclick = function(){index ==0?index = 3:index--;oBanner.style.left = -(index*500)+"px";clear();}//四个点for(vari = 0;i< aLi.length; i++) {        aLi[i].a = i;
        aLi[i].onclick = function () {
            index = this.a;
            oBanner.style.left = -(index * 500) + "px";
            clear();
        }
    }
    // 添加定时器
    timer = setInterval(next, 1000);
    // 鼠标移入时，清除定时器    
    oBox.onmouseover = function () {
        clearInterval(timer);
    }
    // 鼠标移出时
    oBox.onmouseout = function () {
        timer = setInterval(next, 1000);
    }