摘要：點擊左箭頭判斷是否到邊緣最后給輪播圖添加自動播放功能，即利用定時器每秒觸發(fā)一次右箭頭的點擊事件。將返回的定時器保存到實例屬性中，以便在鼠標懸停的時候停止自動輪播。

??這是一個輪播圖組件，你可以直接下載使用，這里是代碼地址，需要傳入容器的id和圖片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等現(xiàn)代瀏覽器。這里是原文地址。

??之前寫一些功能或是特效都是寫在一個個函數(shù)里，可能因為我是由c語言入門編程，所以更傾向于面向過程的編程方式，沒有想過將一個模塊抽象成為對象，做成組件。但是由于嘗到了重復(fù)造輪子之苦。我決定將不可復(fù)用的代碼做成組件，提高編程效率。以下就是我做輪播圖組件的全部過程，由于是第一次寫組件，如果有哪里思維不對，或?qū)懙姆绞接袉栴}，還希望不吝賜教，共同學(xué)習(xí)。

??首先看一下如何使用這個組件，用到了font-awesome圖標庫，然后調(diào)用輪播圖的css，最后是用戶自己的css，用戶必須設(shè)置容器id以及容器寬高，否則無法正常顯示。生成輪播圖時給構(gòu)造函數(shù)傳入容器元素，以及圖片地址：

??下邊我們看下具體實現(xiàn)。首先是輪播圖的構(gòu)造函數(shù)：

function Carousel(obj) {
    this.wrap = obj.wrap;
    this.wrapId = obj.wrap.id;              //容器的id
    this.wrapWidth = this.wrap.offsetWidth; //容器寬
    this.imgNumber = obj.urlArr.length;     //圖片數(shù)
    this.activePage = 0;                    //輪播圖當前頁
    this.settimeID;                         //定時器id
    this.init(obj.urlArr);
}

??基本思路就是在構(gòu)造函數(shù)里寫入輪播圖的實例屬性，不同的輪播圖具有不同的實例屬性，將其共同擁有的方法寫成原型屬性，完整代碼請到github上查看，喜歡的可以順手給個星。原型對象的基本結(jié)構(gòu)如下所示：

Carousel.prototype = {
    constructor: Carousel,                  //構(gòu)造函數(shù)指向原函數(shù)
    init: function(urlArr){},               //構(gòu)建DOM結(jié)構(gòu)
    bindEvent: function(){},                //綁定事件
    pageActiveColor: function(){},          //繪制圓點
    leftAngleclick: function(){},           //點擊左箭頭
    rightAngleclick: function(){}, 
    selectPage: function(selectNum){},      //點擊圓點定位到指定圖片
    setTime: function(){},                  //自動播放
    clearTime: function(){}                 //鼠標懸浮取消自動播放
}

??建立dom結(jié)構(gòu)的代碼如下，根據(jù)容器的id生成后代dom節(jié)點的id以及class，然后在css中使用[attribute$=value]選擇器對不同輪播圖使用同樣的樣式。而在代碼中也可以根據(jù)其容器id來區(qū)分不同輪播圖中的類似元素。因為要支持輪播圖寬度自適應(yīng)，所以采用來百分比設(shè)置后代元素寬度。

init: function(urlArr) {                //創(chuàng)建dom結(jié)構(gòu)
    this.wrap.style.position = "relative";
    this.wrap.style.overflow = "hidden";
    this.wrap.innerHTML = "
";
    let container = document.getElementById(this.wrapId + "_container");
    let page = document.getElementById(this.wrapId + "_page");
    for (let value of urlArr) {         //構(gòu)建圓點
        container.innerHTML += "
";
        page.innerHTML += "
";
    }
    container.style.width = this.imgNumber + "00%";
    container.style.left = 0;
    for (let value of document.getElementsByClassName(this.wrapId + "_img-item")) {
        value.style.width = 100 / this.imgNumber + "%";
    }
    document.getElementsByClassName(this.wrapId + "_pagination")[this.activePage].id = this.wrapId + "_active";        
    this.pageActiveColor();
    this.setTime();
    this.bindEvent();
}

??創(chuàng)建的結(jié)構(gòu)大體上如圖下所示：#id代表用戶定義的容器，生成一個#(id)_container的包裹元素，寬度是容器寬度的圖片張數(shù)倍，.(id)_img-item[n]的寬度和高度都等同于容器，圖片在各自的.(id)_img-item[n]里鋪滿。給容器定義屬性position: relative，通過設(shè)置了絕對定位的#(id)_container的left值來實現(xiàn)輪播。

??為左右箭頭以及下邊的小圓點添加事件，在鼠標移入輪播圖時停止自動播放，移出時設(shè)置自動播放。需要注意的是addEventListener的第二個參數(shù)必須是bind了this后的函數(shù)。因為調(diào)用環(huán)境自帶的函數(shù)會使this的綁定丟失，如果不清楚this的指向的話可以看這篇文章。

bindEvent: function() {                 //綁定事件
    let preAngle = document.getElementById(this.wrapId + "_pre");
    let nextAngle = document.getElementById(this.wrapId + "_next");
    let pageUl = document.getElementById(this.wrapId + "_page");
    let pages = pageUl.getElementsByClassName(this.wrapId + "_pagination");
    for (let key = 0; key < pages.length; key++) {
        pages[key].addEventListener("click", this.selectPage.bind(this, key));
        console.log(key);
    }
    this.wrap.addEventListener("mouseover", this.clearTime.bind(this));
    this.wrap.addEventListener("mouseout", this.setTime.bind(this));
    preAngle.addEventListener("click", this.leftAngleclick.bind(this));
    nextAngle.addEventListener("click", this.rightAngleclick.bind(this));
}

??切換圖片的基本思路就是改變實例屬性中的當前頁這個變量，然后根據(jù)這個變量的值對包裹元素進行定位，再使對應(yīng)的小圓點變色。下邊是點擊左箭頭觸發(fā)的函數(shù)，判斷如果處于邊緣就跳到最后。點擊右箭頭和下邊圓點的事件與之類似。

leftAngleclick: function() {            //點擊左箭頭
        let container = document.getElementById(this.wrapId + "_container");
        if(this.activePage == 0) {      //判斷是否到邊緣
            this.activePage = this.imgNumber - 1;
        } else {
            this.activePage--;
        }
        container.style.left = "-" + this.activePage + "00%";
        this.pageActiveColor();
    }

??最后給輪播圖添加自動播放功能，即利用定時器每3秒觸發(fā)一次右箭頭的點擊事件。將返回的定時器保存到實例屬性中，以便在鼠標懸停的時候停止自動輪播。

setTime: function() {                           //自動播放
        let wrapId = this.wrapId;               //解決this綁定丟失
        this.settimeID = setInterval(function() {
            document.getElementById(wrapId + "_next").click();
        } , 3000);
        console.log("set");
    },
clearTime: function() {                         //鼠標懸浮取消自動播放
        let theId = this.settimeID;             //解決this綁定丟失
        console.log("clear");
        clearInterval(theId);        
    }

??到這輪播圖組件就算寫好了，這可以讓我們少寫很多代碼，而且可以在一個頁面中多次使用，不會污染到全局變量。缺陷在于這時的輪播圖還不能支持10張以上的圖片，因為考慮到這種需求并不是很多，就沒有寫10張以上的判斷條件，有需要時可以自行添加。有什么意見或建議歡迎留言。