用JS实现轮播图

//用JS实现轮播图：
// 主要功能
/*
    1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    2、点击右按钮依次，图片往左播放一张，依次类推，左按钮同理
    3、图片播放的时候，下面的小圆圈跟着一起变化
    4、点击小圆圈，可以播放相应图片
    5、鼠标不经过轮播图，轮播图也会自动播放图片
    6、鼠标经过，轮播图模块，自动播放停止
*/
var timer;
function activeCircle(ol, num)
{
    for (var j=0; j<ol.children.length; j++) {
        ol.children[j].classList.remove('current');
    }
    ol.children[num].classList.add('current');
}

window.addEventListener('load', function(){
    // 1、获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');

    // 2、鼠标经过就隐藏左右按钮
    focus.addEventListener('mouseenter', function(){
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
    })

    focus.addEventListener('mouseleave', function(){
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function(){
            arrow_r.click();//手动调用右侧按钮点击事件，不需要用户去触发
        }, 2000);
    })

    //3、动态生成小圆圈--小圆圈的个数跟图片的张数一样
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var num = 0;
    for(var i = 0; i < ul.children.length; i++) {
        //创建一个li
        var li = document.createElement('li');
        li.setAttribute('index', i);
        // 生成小圆圈的同时，绑定点击事件
        //利用排他思想，干掉所有人，再把自己的这个属性加上
        li.addEventListener('click', function(){
                for (var j=0; j<ol.children.length; j++) {
                    ol.children[j].classList.remove('current');
                }
                this.classList.add('current');
                // 点击小圆圈移动图片，移动是ul而不是li
                // 当前点击li的索引
                var index = this.getAttribute('index');
                num = index;
                console.log(ul,index*ul.children[index].offsetWidth);
                animate(ul,-index*ul.children[index].offsetWidth);
            
        })
        ol.appendChild(li);
    }
    //默认把一个li插入到ol中
    ol.children[0].className = 'current';
    var flag = true;
    
    //点击右侧按钮图片滚动一张
    arrow_r.addEventListener('click', function(){
        if (flag) {//设置节流阀，防止多次点击的时候切换过快的问题
            flag = false;
            //    num +1 <ul.children.length ? num++ : num=0;
            //     console.log(-num * ul.children[num].offsetWidth);
            //     animate(ul, -num * ul.children[num].offsetWidth);
            // 如果走到了最后那么这里的值要变成-1,此时我们要直接设置ul的left值为0,而不使用动画效果
            if (num == 3) {
                ul.style.left = 0;
                num = -1;
            }
            num++;
            console.log(flag);
            animate(ul, -num * ul.children[num].offsetWidth,function(){
                flag = true;
            });
            activeCircle(ol, num);
        }
    })

    arrow_l.addEventListener('click', function(){
        if (flag) {
            flag = false;
            if(num <=0) {
                num = ul.children.length-1;
                ul.style.left = -num * ul.children[num].offsetWidth + 'px';
            } else {
                num--;
            }
            animate(ul, -num * ul.children[num].offsetWidth, function(){
                flag = true;
            });
            activeCircle(ol, num);
        }
        
    })

    // 设置定时器,setInterval变量定义是全局变量吗
   timer = setInterval(function(){
       arrow_r.click();//手动调用右侧按钮点击事件，不需要用户去触发
    }, 2000);
})