JS - 轮播图

window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var ul = document.querySelector('ul');
    var arrowL = document.querySelector('.arrow-left');
    var arrowR = document.querySelector('.arrow-right');
    var ol = document.querySelector('ol');
    // 父盒子大小，ul每次移动的单位，放到全局变量，下面要调用；
    var foWidth = focus.offsetWidth;

    // 鼠标过图，按钮出现
    focus.addEventListener('mouseenter', function () {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        // 鼠标过图时，自动轮播结束
        clearInterval(timer);
        timer = null;
    });
    // 鼠标离图，按钮消失
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        // 鼠标离开，自动轮播开始，2秒
        timer = setInterval(function () {
            // 手动调用右键点击事件
            arrowR.click();
        }, 2000);
    });
    // 小圆点,根据图片的数量创建小圆点
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        //顺便给li加上自定义属性，一会轮播的时候要用
        li.setAttribute('index', i);
        // 加给ol,要在for循环里添加给ol
        ol.appendChild(li);
        // 点谁谁亮
        li.addEventListener('click', function () {
            // 排他思想，干掉其他li, for循环了，干掉其他li肯定需要[i]
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 剩下我自己
            this.className = 'current';

            // 计算target（移动的距离）,第2张往左移动一个offsetWidth, 第三张移动2个focus.offsetWidth，第四张移动3个，和index的值一样，所以还要获取ol.li的属性值 xx.getAttribute('')
            var index = this.getAttribute('index');
            // 点击小圆圈，再按按钮，顺着index继续播放,按钮，小圆圈，图片保持一致
            num = circle = index;
            // 联系动画函数,是ul移动
            animate(ul, -index * foWidth);
        })
    }
    // 再给第一个li背景色 好饿啊
    ol.children[0].className = 'current';


    // 如果到达最后一张，跳回第一张,如果从正常的最后一张跳，会直接跳过第一张所以要在最后再克隆一张图片，克隆第一张
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first); // 问题: 已添加，但是图片不显示。原因：父盒子太小，图片掉到下一层去了。
    // 右边按钮
    var num = 0;
    var circle = 0;
    var flag = true;
    arrowR.addEventListener('click', function () {
        if (flag) {// 节流阀，一张图片播放完，才能执行下一个动画函数
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            // 添加动画，ul移动，距离还是按几个盒子移动，没有索引号，给个num，让自加
            num++;
            // 点右键，向左移动，反方向
            animate(ul, -num * foWidth, function () {
                flag = true;
            });

        }
        // 点右键，让小圆点跟着动，没有索引号，给个circle，让自加
        circle++;
        // 如果小圆圈到了最后一个，自动跳回0
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 小圆点排他思想,左右两键都要用，封装函数，调用
        circleChange();

    });
    // 左边按钮
    arrowL.addEventListener('click', function () {
        // 调用动画
        //如果轮播图停在第一张，跳到最后一张图，也就是要挪4个盒子的长度，所以下面的num要减1，从后往前播
        if (flag) { // 节流阀
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * foWidth + 'px';
            }
            num--;
            animate(ul, -num * foWidth, function () {
                flag = true;
            });
        }

        // 小圆圈跟着变
        circle--;
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        // 排他思想，调用函数
        circleChange();
    });

    //   排他思想函数
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 声明一次定时器，否则需要鼠标过一次图，才能启动定时器
    var timer = setInterval(function () {
        // 手动调用右键点击事件
        arrowR.click();
    }, 2000);

})

思路：

1. 图片用ul>li>a包裹，li浮动，移动的是ul；

2. 鼠标经过图片时，左右按钮出现，鼠标离开时，左右按钮消失

3. 根据图片的数量，安排下方小圆点，创建元素+添加元素

4. 点击小圆点，图片跟随移动，（1）动画函数 （2）小圆点自定义属性  (3)小圆点排他思想

5. 点击右按钮，图片向前播放，无缝 -- > 克隆 -- >不能出现小圆点

6. 右按钮，小圆点，图片匹配 

7. 左按钮同上

8. 鼠标离开图片，自动轮播，鼠标经过，停止轮播

9. 节流阀，一个动画执行完毕，再执行下一个动画

错误：快速点击左右按钮，小圆圈和图片不对应

改正：小圆圈放进节流阀里，保证一张图一动

         if (flag) { // 节流阀
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * foWidth + 'px';
            }
            num--;
            animate(ul, -num * foWidth, function () {
                flag = true;
            });
            // 小圆圈跟着变
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }