完整的轮播图

<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>
            
        ol>
    div>
    
    <div id="arr">
        <span id="left"><span>
        <span id="right">>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>