用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);
})