將輪播圖組件化

時間 2019-11-06

標籤組件简体版

原文原文鏈接

這是一個輪播圖組件，你能夠直接下載使用，這裏是代碼地址，須要傳入容器的id和圖片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等現代瀏覽器。這裏是原文地址。javascript

以前寫一些功能或是特效都是寫在一個個函數裏，可能由於我是由c語言入門編程，因此更傾向於面向過程的編程方式，沒有想過將一個模塊抽象成爲對象，作成組件。可是因爲嚐到了重複造輪子之苦。我決定將不可複用的代碼作成組件，提升編程效率。如下就是我作輪播圖組件的所有過程，因爲是第一次寫組件，若是有哪裏思惟不對，或寫的方式有問題，還但願不吝賜教，共同窗習。css

首先看一下如何使用這個組件，用到了font-awesome圖標庫，而後調用輪播圖的css，最後是用戶本身的css，用戶必須設置容器id以及容器寬高，不然沒法正常顯示。生成輪播圖時給構造函數傳入容器元素，以及圖片地址：html

<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/user-index.css">
</head>

<body>
    <div id="carousel"></div>           
    <div id="other"></div>
    <script src="js/carousel.js"></script>
    <script>
        var carousel = new Carousel({
            wrap: document.getElementById("carousel"),
            urlArr: ["img/1.jpg", "img/2.jpg", "img/3.jpg"]
        });
        var other = new Carousel({
            wrap: document.getElementById("other"),
            urlArr: ["img/4.jpg", "img/5.jpg", "img/6.jpg"]
        });
    </script>
</body>

下邊咱們看下具體實現。首先是輪播圖的構造函數：java

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

基本思路就是在構造函數裏寫入輪播圖的實例屬性，不一樣的輪播圖具備不一樣的實例屬性，將其共同擁有的方法寫成原型屬性，完整代碼請到github上查看，喜歡的能夠順手給個星。原型對象的基本結構以下所示：git

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

創建dom結構的代碼以下，根據容器的id生成後代dom節點的id以及class，而後在css中使用[attribute$=value]選擇器對不一樣輪播圖使用一樣的樣式。而在代碼中也能夠根據其容器id來區分不一樣輪播圖中的相似元素。由於要支持輪播圖寬度自適應，因此採用來百分比設置後代元素寬度。github

init: function(urlArr) {                //建立dom結構
    this.wrap.style.position = "relative";
    this.wrap.style.overflow = "hidden";
    this.wrap.innerHTML = '<span id="' + this.wrapId + '_pre" class="fa fa-angle-left fa-3x"></span><span id="' + this.wrapId + '_next" class="fa fa-angle-right fa-3x"></span><ul id="' + this.wrapId + '_page"></ul><div id="' + this.wrapId + '_container"></div>';
    let container = document.getElementById(this.wrapId + '_container');
    let page = document.getElementById(this.wrapId + "_page");
    for (let value of urlArr) {         //構建圓點
        container.innerHTML += '<div class="' + this.wrapId + '_img-item"><img src="' + value + '"></div>';
        page.innerHTML += '<li class="' + this.wrapId + '_pagination"></li>';
    }
    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();
}

建立的結構大致上如圖下所示：#id表明用戶定義的容器，生成一個#(id)_container的包裹元素，寬度是容器寬度的圖片張數倍，.(id)_img-item[n]的寬度和高度都等同於容器，圖片在各自的.(id)_img-item[n]裏鋪滿。給容器定義屬性position: relative，經過設置了絕對定位的#(id)_container的left值來實現輪播。編程

爲左右箭頭以及下邊的小圓點添加事件，在鼠標移入輪播圖時中止自動播放，移出時設置自動播放。須要注意的是addEventListener的第二個參數必須是bind了this後的函數。由於調用環境自帶的函數會使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));
}

切換圖片的基本思路就是改變實例屬性中的當前頁這個變量，而後根據這個變量的值對包裹元素進行定位，再使對應的小圓點變色。下邊是點擊左箭頭觸發的函數，判斷若是處於邊緣就跳到最後。點擊右箭頭和下邊圓點的事件與之相似。dom

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秒觸發一次右箭頭的點擊事件。將返回的定時器保存到實例屬性中，以便在鼠標懸停的時候中止自動輪播。函數

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張以上的判斷條件，有須要時能夠自行添加。有什麼意見或建議歡迎留言。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。