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

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

    });

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

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

   // 點(diǎn)擊小圓圈  更改num和circl 來(lái)更換輪播圖
            num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // 動(dòng)畫(huà)效果
            animate(ul, -num * focusWidth);
        })

    }

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

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

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

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

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

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

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

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

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


    // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步長(zhǎng)值寫(xiě)到定時(shí)器的里面
        // 把我們步長(zhǎng)值改為整數(shù) 不要出現(xiàn)小數(shù)的問(wèn)題
        // 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) {
            // 停止動(dòng)畫(huà) 本質(zhì)是停止定時(shí)器
            clearInterval(obj.timer);
            // 回調(diào)函數(shù)寫(xiě)到定時(shí)器結(jié)束里面
            // if (callback) {
            //     // 調(diào)用函數(shù)
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 這個(gè)步長(zhǎng)值改為一個(gè)慢慢變小的值  步長(zhǎng)公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}