window.addEventListener('load',function(){
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    focus.addEventListener('mouseenter',function(){ //鼠标经过事件
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer); //停止计时器
        timer = null; //这一行是清空定时器变量
    })
    focus.addEventListener('mouseleave',function(){ //鼠标离开事件
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function(){  //重新开启定时器
            arrow_r.click();
        },2000)
    })

    // 动态生成小圆圈,有几张图片,就生成几个小圆圈
    var ul = focus.querySelector('ul'); //获取focus里面的ul
    //有多少图片就生成多少小圆点,减1是因为这里的轮播图多了末尾那张复制的,不过这里是用
    // js自动补末尾那张图,所以就不需要i < ul.children.length-1
    for(var i = 0; i < ul.children.length; i++){
        // 创建一个小li
        var li = this.document.createElement('li');  //创建li
        var ol = focus.querySelector('.circle');  //获取focus里面的circle
        var focusWidth = focus.offsetWidth; //获取图片的宽度
        // 记录当前小圆圈的索引号,通过自定义属性来做
        li.setAttribute('index',i)  //把当前记录的索引号赋值给index
        // 把小li插入到ol里面
        ol.appendChild(li);
        // 小圆圈的排他思想,我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click',function(){
            // 把所有小li清除current类名
            for(var i = 0; i < ol.children.length; i++){
                ol.children[i].className = ''; //所有li都清除current类名
            }
            // 把当前的小li设置current类名
            this.className = 'current';
            // 点击小圆圈,移动图片,虽然移动的是ul
            // ul的移动距离是小圆圈的索引号乘以图片的宽度,注意向左移动的值是负值
            // 当点击了某个小li,就拿当前的小li的索引号
            var index = this.getAttribute('index');
            // 当点击了某个小li,就要把这个小li的索引号给num
            num = index;
            // 当点击了某个小li,就要把这个小li的索引号给circle
            circle = index;
            // var focusWidth = focus.offsetWidth; //获取图片的宽度(先注释且写在了这个函数外面)
            animate(ul,-index * focusWidth - 40 ); //调用动画函数，这个40可以自己调
        })
    }
    // 把ol里面的第一个小li设置类名为current
    ol.children[0].className = 'current';

    // 克隆第一张图片,放到ul的最后面(写在生成小圆圈的后面,就不会多了一个小圆圈了)
    var first = ul.children[0].cloneNode(true); //true是指深克隆
    ul.appendChild(first); //放到ul的最后面

    var num = 0;
    var circle = 0; //控制小圆圈的播放
    arrow_r.addEventListener('click',function(){
        //如果走到了最后复制的一张图片,此时,ul要快速复原left,即left改为0
        if(num == ul.children.length - 1){  //4是轮播图片总数-1得到的,我这里5张图,所以就写4,或者写ul.children.length - 1就比较灵活
            ul.style.left = -40;//以自己的原样式为准,一般这里是0,我这里是-40,这行的作用是恢复轮播图第一张图的位置
            num = 0;
        }
        num++;
        animate(ul,-num * focusWidth-40); //这个40可以自己调
        circle++;//每点击一次,小圆圈也会跟随一起变化,circle是控制小圆圈播放的变量
        // 因为有4张需要的图片(实际有5张),如果circle==4,说明走的最后克隆的那张图片了,此时需要复原按钮位置
        if(circle == ol.children.length){
            circle = 0; //按钮的位置分别是0、1、2、3
        }


        //因为左右侧按钮在下面那段部分的代码是相同的,所以可以封装一下,下面直接调用就好
        // // 先清除其他小圆圈的current类名
        // for(var i = 0; i < ol.children.length; i++){
        //     ol.children[i].className = '';
        // }
        // //留下当前点击的小圆圈的current类名
        // ol.children[circle].className = 'current';
        circleChange();
    });





    //左侧按钮做法
    arrow_l.addEventListener('click',function(){
        if(num == 0){
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul,-num * focusWidth-40);
        circle--;
        if(circle < 0){
            circle = ol.children.length - 1;
        }


        //因为左右侧按钮在下面那段部分的代码是相同的,所以可以封装一下,下面直接调用就好
        // for(var i = 0; i < ol.children.length; i++){
        //     ol.children[i].className = '';
        // }

        // ol.children[circle].className = 'current';
        circleChange();
    });
    function circleChange(){
        for(var i = 0; i < ol.children.length; i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }

    // 自动播放轮播图功能,每隔2秒就执行一次
    //自动播放的原理类似于点击了一次右侧按钮
    // 手动调用事件,arrow_r.click(),arrow_r就是右侧按钮
    var timer = this.setInterval(function(){
        arrow_r.click();
    },1500);
})