轮播图基础

<script>
    var box = myFun('box');
    var screen = box.children[0];
    var ul = screen.children[0];
    var ol = screen.children[1];

    var arr = myFun('arr');
    var arrLeft = myFun('left');
    var arrRight = myFun('right');

    var count = ul.children.length;
    for (var i = 0; i < count; i++) {
        var li = document.createElement('li');
        ol.appendChild(li);
        setInnerText(li, i + 1);
        if (i === 0) {
            ol.children[0].className = 'current';
        }
        li.onclick = liClick;

        li.setAttribute('index', i);//让每个图片li记录自己的索引。
    }
    var imgWidth = screen.offsetWidth;
    function liClick() {
        for (var i = 0; i < ol.children.length; i++) {
            var li = ol.children[i];
            li.className = '';
        }
        this.className = 'current';
        var liIndex = parseInt(this.getAttribute('index')); //这一步不熟悉。
        animate(ul, -liIndex * imgWidth);
        index = liIndex;   // 这一步好好思考。
    }

    //显示左右箭头
    var timerId;
    box.onmouseover = function () {
        arr.style.display = 'block';
        clearInterval(timerId);
    }
    box.onmouseout = function () {
        arr.style.display = 'none';
         timerId = setInterval(function () {
            arrRight.click();
        },2000)

    }
    
    //下一张和上一张
    //当直接点击序号时index值并没有被改变，要让上面图片的index的值和实际的一样
    var index = 0;//
    arrRight.onclick = function () {
        if (index === count) {
            ul.style.left = '0px'; //是 ul而不是li  一直都是ul.left在变化
            index = 0;  //让它标识到 第一个图片的索引！！！
        }
        index++;  //如果在里面放着  会报错 因为点击是 没有所因为五的序号对应;
        if (index < count){

            ol.children[index].click();
        } else {  //因为克隆的那张没有对应的序号，所以要写在else里面。并且以动画的方式让它转到克隆的那张图
            animate(ul, -index * imgWidth);
            //到克隆第一张图片时取消所有的序号高亮显示让 一号显示。
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i];
                li.className = '';
            }
            ol.children[0].className = 'current';
        }
    }
    arrLeft.onclick = function () {
        if (index === 0) {
            index = count;
            ul.style.left = -index * imgWidth + 'px';
        }
        index--;             //继续看 做总结！ 这一步不是很清楚
        ol.children[index].click();

       /* if (index > 0) {
            index--;
            ol.children[index].click();
        }*/
    }
    //无缝连接
    var firstLi = ul.children[0];        //克隆不熟悉，多看
    var cloneLi = firstLi.cloneNode(true);
    ul.appendChild(cloneLi);


    //自动切换
   var timerId = setInterval(function () {
        arrRight.click();
    },2000)
    
</script>

 function liClick() {
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i];
                li.className = '';
            }
            this.className = 'current';
            var liIndex = parseInt(this.getAttribute('index'));  //又没记住---------
            animate(ul, - liIndex * imgWidth);
            index = liIndex;
        }
        box.onmouseenter = function () {
            arr.style.display = 'block';
        }
        box.onmouseleave = function () {
            arr.style.display = 'none';
        }
        //上一张  下一张 重点
        var index = 0;
        arrRight.onclick = function () {
            //index++  如果放在这里，直接切换到第一张 没有动画效果;
            if (index === count) {
                ul.style.left = '0px';
                index = 0;
            }
            index++;
            if (index < count) {
                //index++ 如果放在里面，点击cloneli时 会显示undifinde 所以要把index++ 放在外面
                ol.children[index].click();  //为什么是[index]
            } else {
                animate(ul, - index * imgWidth);
                for (var i = 0; i < ol.children.length; i++) {
                    var li = ol.children[i];
                    li.className = '';
                }
                ol.children[0].className = 'current'; //指定第一个li为高亮显示;
            }
        }


        //问题真的很多 这一个步 不熟
        arrLeft.onclick = function () {
            if (index === 0) {
                index = count; // 这一步是让index得值等于最后一张的索引 克隆的哪一张
                ul.style.left = - index * imgWidth + 'px';
            }
            index--;  //放在哪里很有讲究
            ol.children[index].click();
//            if (index > 0) {}
//            index--;
//            ol.children[index].click();
        }

     var count = ul.children.length;
     for (var i = 0; i < count; i++) {
         var li = document.createElement('li');
         ol.appendChild(li);
         setInnerText(li, i + 1);
         li.onclick = liClick;
         if(i === 0) {
             li.className = 'current';
         }
        li.setAttribute('index', i);  //让ol中的li 记录图片对应的索引i
     }
        var imgWidth = screen.offsetWidth;
        function liClick() {
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i];
                li.className = '';
            }
            this.className = 'current';
       //在点击时 this.点击时被调用的时候的 索引（通过getAttrbute获取到） 赋值给index(有Bug一会儿调试）
            var liIndex = parseInt(this.getAttribute('index'));
            //调用animete 传入参数 让“ul”去改变位置 ul向左走  所以为负值。
            animate(ul, - liIndex * imgWidth);
           index = liIndex  //让序号的index等于下面全局变量的 index
        }
     box.onmouseenter = function () {
         arr.style.display = 'block';
     }
     box.onmouseleave = function () {
         arr.style.display = 'none';
     }
        //上一张，下一张
     var index = 0; //默认是ol.li的index对应的第一张图片 i的索引是0，
     //（2） 此时index为全局变量， 当上面ol.li的序号点击时 改变了 索引，这里面的全局的index 没有改变
     //上面的index是一个封闭函数，所以要改变上面的定义的index
     arrRight.onclick = function () {  //下面所有的事情 都是在点击右按钮而进行的逻辑
         if(index === count) {
             ul.style.left = '0px';
             index = 0;  //图片从克隆的图片在点击的一瞬间变到了第一张，所以对应的索引也得改变
                         //为什么是改变索引？  先吃饭 吃完在想！！！
         }

         //index 的值是对应的序号的index 如果满足条件 index + 1 并且让此时index对应的序号的按钮自己点击一次
         index++;  //克隆图片是 需要让index++ 放在外面
         if (index < count) {  //之前还有-1  如果还减 就执行else的语句 就不会点击序号 5序号不会高亮显示
//             index++;  如果index的在if判断句里面 找不到对应的序号，点击不了 (克隆的第一张图片）
             ol.children[index].click();
         } else {
             animate(ul, - index * imgWidth);
             for (var i = 0; i < ol.children.length; i++) {
                 var li = ol.children[i];
                 li.className = '';
             }
             ol.children[0].className = 'current';
         }
     }

     arrLeft.onclick = function () {
        if(index === 0) {
            index = count; //index = 0  把ul.chiledren.lenght 赋值给index
            ul.style.left = -index * imgWidth + 'px'; //
        }
         //if (index > 0 ) {
             index--;
             ol.children[index].click();
        //
     }

     var firstLi = ul.children[0];
     var cloneLi = firstLi.cloneNode(true); // clone.node() 参数ture 保存内容 false不保存内容
     ul.appendChild(cloneLi);
     // 克隆出来的图片 没有 对应的序号，所以无法点击出来 但是 确实增加了ul的长度，
 </script>