完整的轮播图

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
        }

        img {
            cursor: pointer;
            width: 500px;
            height: 200px;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #cccccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .screen ul {
            width: 3000px;
            top: 0;
            left: 0;
            position: absolute;
        }

        .screen li {
            width: 500px;
            height: 200px;
            float: left;
            /*overflow: hidden;*/
        }

        .screen ol {
            position: absolute;
            width: 140px;
            height: 20px;
            border-radius: 10px;
            background: rgba(0, 0, 0, .6);
            bottom: 15px;
            left: 50%;
            margin-left: -70px;
            cursor: pointer;
        }

        .screen ol li {
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin: 4px 8px;
        }

        .screen ol .current {
            background-color: #f10215;
        }

        #arr {
            display: none;
        }

        #arr #left,
        #arr #right {
            position: absolute;
            width: 30px;
            height: 50px;
            top: 50%;
            margin-top: -25px;
            background: rgba(0, 0, 0, .3);
            font-size: 30px;
            color: #ffffff;;
            cursor: pointer;
            text-align: center;
            line-height: 50px;
        }

        /*.arrCol{
            background: rgba(0,0,0,.6);
        }*/

        #right {
            right: 7px;
        }

    </style>

<div class="all" id='box'>
    <div class="screen"><!--相框-->
        <!--图片-->
        <ul>
            <li><img src="img/01.jpg"/></li>
            <li><img src="img/02.jpg"/></li>
            <li><img src="img/03.jpg"/></li>
            <li><img src="img/04.jpg"/></li>
            <li><img src="img/05.jpg"/></li>
        </ul>
        <!--下方按钮-->
        <ol>
            <!--            <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>-->
        </ol>
    </div>
    <!--左右焦点    -->
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

<script>
    //获取最外层div
    var box = my$("box")
    //获取相框
    var screen = box.children[0];
    //获取相框的宽度
    var imgWidth = screen.offsetWidth;
    //获取ul
    var ulObj = screen.children[0];
    //获取ul中的li
    var list = ulObj.children;
    //获取ol
    var olObj = screen.children[1];
    //获取焦点的div
    var arr = my$("arr");

    var pic = 0;       //全局变量
    //创建下方按钮
    for (var i = 0; i < list.length; i++) {
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        //创建自定义属性，存储索引
        liObj.setAttribute("index", i);
        //注册按钮鼠标进入事件
        liObj.onmouseover = function () {
            //清除所有ol中li的样式
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            this.className = "current";
            //获取当前索引值
            pic = this.getAttribute("index");
            animate(ulObj, -pic * imgWidth);
        };
    }
    //设置按钮默认颜色
    olObj.children[0].className = "current";
    //自动播放---直接调用右边按钮点击事件
    var timeId = setInterval(clickHandle, 1000);
    //复制ul中的第一个li然后加入到ul中的最后一个（为了实现无缝衔接）
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    //鼠标进入box显示左右焦点
    box.onmouseover = function () {
        arr.style.display = "block";
        //停止自动播放
        clearInterval(timeId);
    };
    //鼠标离开隐藏左右焦点
    box.onmouseout = function () {
        arr.style.display = "none";
        //继续自动播放
        timeId = setInterval(clickHandle, 1000);
    };
    //右边按钮点击事件
    my$("right").onclick = clickHandle;
    function clickHandle() {
        //length=6,若当前索引值为5（当前显示的是第六张图片）.就将索引值重新设置为0，并在下一次点击时显示的是第二张图片
        if (pic == list.length - 1) {
            pic = 0;
            ulObj.style.left = 0 + "px";
        }
        pic++;
        animate(ulObj, -pic * imgWidth);
        //如果pic为5，此时显示第六张图片（用户看到的是第一张），第五个按钮样式应该取消，第一个按钮添加样式
        if (pic == list.length - 1) {
            olObj.children[olObj.children.length - 1].className = "";
            olObj.children[0].className = "current";
        } else {
            //遍历ol，将所有样式清除，设置当前样式为current
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].className = "";
            }
            olObj.children[pic].className = "current";
        }
    };
    //左边按钮点击事件
    my$("left").onclick = function () {
        //若当前索引为0，
        if (pic == 0) {
            pic = list.length - 1;
            ulObj.style.left = -pic * imgWidth + "px";
        }
        pic--;
        console.log(pic);
        animate(ulObj, -pic * imgWidth);
        for (var i=0;i<olObj.children.length;i++) {
            olObj.children[i].className = "";
        }
        olObj.children[pic].className = "current";
    };


</script>