// 獲取左右箭頭的元素
    let arrow_l = this.document.querySelector('.arrow-l');
    let arrow_r = this.document.querySelector('.arrow-r');
    // 獲取到輪播圖盒子元素
    let focus = this.document.querySelector('.focus');

    // 輪播圖盒子添加鼠標移入移出事件 顯示或隱藏 左右箭頭
    focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 鼠標移入的時候清除定時函數(shù)，不再自動滑動輪播圖
        clearInterval(timer);
        timer = null;

    });

    focus.addEventListener('mouseleave', function(e) {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 鼠標移出  添加定時任務，每2秒來觸發(fā)一次點擊右箭頭的點擊
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    })

// 獲取到ul列表（輪播圖列表）和ol列表 （小圓圈列表）元素
var ul = focus.querySelector('ul');
// 此時ol列表內沒有元素
var ol = focus.querySelector('.circle');
// 循環(huán)輪播圖列表 有多少張輪播圖就添加多少個小圓圈
for (var i = 0; i < ul.children.length; i++) {
        // 創(chuàng)建li標簽
        var li = this.document.createElement('li');
        // 給li標簽添加自定義屬性 為輪播圖的下標 用于
        li.setAttribute('l-index', i);
        // ol標簽添加li標簽
        ol.appendChild(li);
        // 每一個li標簽添加點擊函數(shù)
        li.addEventListener('click', function() {
            // 清除所有小圓圈的樣式
            for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // 點擊哪一個小圓圈  就添加樣式
            this.className = 'current';

   // 點擊小圓圈  更改num和circl 來更換輪播圖
            num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // 動畫效果
            animate(ul, -num * focusWidth);
        })

    }

// 克隆一個第一張輪播圖的節(jié)點添加到ul內
// 播放到最后一個的時候  轉到第一個看著有連貫性
    ol.children[0].className = 'current';
    let cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);

    // 添加一個下標  來記錄輪播圖播放到了第幾張
    num = 0;
    // 與num類似，記錄小圓圈的下標
    circl = 0;
    // 添加節(jié)流閥
    flag = true;

// 點擊右箭頭的  點擊事件
arrow_r.addEventListener('click', function(e) {
        // 添加一個節(jié)流閥 默認為True 如果點擊之后立即改為false  如果沒處理完上次點擊的事件 這個時間內的點擊事件不再處理
        if (flag) {
            // 改變節(jié)流閥的狀態(tài)
            flag = false;

            // 如果num下標為最后一張 就恢復到第一張 把num下標改為默認0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;

            }
            // num下標加1
            num++;
            // 改變動畫效果 滑動到  第幾張輪播圖 * 一張的寬度 的距離
            animate(ul, -num * focusWidth, function() {
                // 回調函數(shù)設置節(jié)流閥為true  可以再次點擊
                flag = true;
            });

            // 小圓圈+1
            circl++;
            // 如果小圓圈到了最后一個  恢復為0
            if (circl == ul.children.length - 1) {
                circl = 0;
            }
            // 改變小圓圈的樣式
            circlChange();
        }
    })

// 左箭頭的點擊事件
    arrow_l.addEventListener('click', function(e) {
        if (flag) {
            flag = false;
            // 判斷為0時說明是從第一張開始往左點
            if (num == 0) {
                // 更改num下標為最后一個
                num = ul.children.length - 1;
                // 更改輪播圖為最后一個
                ul.style.left = -num * focusWidth + 'px';
            }
            // num -1
            num--;
            // 動畫效果
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 如果小圓圈為0  說明到了第一個輪播圖
            if (circl == 0) {
                // 小圓圈到最后一個
                circl = ul.children.length - 1;
            }
            // 小圓圈-1
            circl--;
            // 改變小圓圈的樣式
            circlChange();
        }
    })

function circlChange() {
     // 遍歷ol列表  刪除每一個小圓圈的樣式
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // 給當前circl下標的小圓圈添加樣式
        ol.children[circl].className = 'current';
    }

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  調用的時候 callback()


    // 先清除以前的定時器，只保留當前的一個定時器執(zhí)行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步長值寫到定時器的里面
        // 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止動畫 本質是停止定時器
            clearInterval(obj.timer);
            // 回調函數(shù)寫到定時器結束里面
            // if (callback) {
            //     // 調用函數(shù)
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 這個步長值改為一個慢慢變小的值  步長公式：(目標值 - 現(xiàn)在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}