原生幻燈片封裝學習

JavaScript部分

(function(window,document) {
    var Broadcast = function(cla,options) {
        // 判斷是用函式建立的還是用new建立的。這樣我們就可以通過Broadcast("dom") 或 new Broadcast("dom")來使用
        if (!(this instanceof Broadcast)) return new Broadcast(cla, options);
        // 排序圖片的層疊位置
        var front = this.nameclass(cla),//獲取的class元素組
            img = this.childer(front),
            imglength = img.length,
            jishu = 0,
            _this = this,intr;
        for (var r in img) {
            if (r == 0) {
                img[r].style.cssText= `z-index:` + (imglength - r) + `;position:absolute;opacity:1;transition:0.5s;`;
            } else {
                img[r].style.cssText= `z-index:` + (imglength - r) + `;position:absolute;opacity:0;transition:0.5s;`;
            }
        }
        //設定選擇器 
        if(options.spot=="true"){
                if(options.Selector!=undefined){
                    for(var i=0;i<imglength;i++){
                        var domspan = document.createElement(`span`);
                        if(i==0){
                            domspan.setAttribute(`class`,options.current)
                        }
                        this.nameclass(options.Selector)[0].appendChild(domspan)
                    } 
                }
        }
        var spotdom = this.nameclass(options.Selector)[0].children;
        // 給選擇器新增點選事件
        for(var y=0;y<spotdom.length;y++){
            spotdom[y].index = y;
            if(y!=0){
                spotdom[y].setAttribute(`class`,``);
            }
            spotdom[y].onclick=function(){
               this.setAttribute(`class`,options.current)
               jishu=this.index;
               _this.Front(img,jishu,spotdom);
            }
        }
         // 給兩個箭頭繫結點選事件
        if(options.leftarrow!=undefined&&options.rightarrow!=undefined){
            this.nameclass(options.leftarrow)[0].onclick=function(){
                if(jishu==0){
                    jishu=imglength-1
                }else{
                    jishu--
                }
                _this.Front(img,jishu,spotdom);
            }
            this.nameclass(options.rightarrow)[0].onclick=function(){
                if(jishu==imglength-1){
                    jishu=0;
                }else{
                    jishu++
                }
                _this.Front(img,jishu,spotdom);
            }
        }
        // 自動播放
        var bof = function(){
            intr = setInterval(function() {
            if(img.length-1==jishu){
                jishu=0;
                }else{
                    jishu++
                }
                _this.Front(img,jishu,spotdom)
            }, 2000);
        }
        bof();
        // 滑鼠經過停止
        front[0].onmouseover = function(){
            intr = clearInterval(intr);
        }
        // 滑鼠離開播放
        front[0].onmouseout = function(){
            bof();
        }
    }
    Broadcast.prototype = {
        nameclass: function(mingzi) { //獲取class元素組
            var obj = [];
            var jia = 0;
            var dom = document.getElementsByTagName(`*`);
            for (var i in dom) {
                if (dom[i].nodeType == 1) {
                    if (dom[i].getAttribute(`class`) === mingzi) {
                        obj[jia] = dom[i];
                        jia++
                    }
                }
            }
            return obj;
        },
        childer: function(father,name) { //獲取子集元素組
            var obj2 = [],
                j = 0;
            var dom = father[0].children[0].childNodes;

            for (var h in dom) {
                if (dom[h].nodeType == 1) {
                    obj2[j] = dom[h];
                    j++
                }
            }
            return obj2;
        },
        Front: function(dom2,cishu,xuan) {
            var dom2length = dom2.length;
            for (var r in dom2) {
                if (r == cishu) {
                    dom2[r].style.opacity=`1`;
                    xuan[r].setAttribute("class",`current-dan`)
                } else {
                    dom2[r].style.opacity=`0`;
                    xuan[r].setAttribute("class",``)
                }
            }

        }
    }
    // 暴露方法
    window.Broadcast = Broadcast;
})(window, document);

HTML結構部分

<div class="boy">
        <div class="img-box">
            <a href="" title="" ><img src="img/timg(1).png" alt=""></a>
            <a href="" title="" ><img src="img/timg(2).png" alt=""></a>
            <a href="" title="" ><img src="img/timg(3).png" alt=""></a>
            <a href="" title="" ><img src="img/timg.png" alt=""></a>
        </div>
        <div class="selector"></div>
        <div class="left-att"><</div>
        <div class="right-att">></div>
    </div>

CSS部分

.boy{
    width: 1103px;
    margin: 0 auto;
    height: 714px;
    position: relative;
}
.img-box{
    height: 714px;
}
.img-box a{
    float: left;
}
/* 設定圓點的樣式 */
.selector{
    width: 96px;
    position: absolute;
    left: 50%;
    margin-left: -48px;
    bottom: 20px;
    z-index: 222;
}
.selector span{
    float: left;
    margin-left: 10px;
    border-radius: 100px;
    background-color: #999;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.selector .current-dan{
    background-color: #13af13;
}
/* 設定箭頭的位置 */
.left-att{
    position: absolute;
    left: 20px;
    margin-top: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    z-index: 222;
    cursor: pointer;
}
.right-att{
    position: absolute;
    right: 20px;
    margin-top: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 222;
}

 呼叫方法

var ip = new Broadcast(`boy`,{//輪播圖整體結構的父級class
            spot:`true`,//false不需要選擇器true設定選擇器
            Selector:`selector`,//設定你選這器的父級名稱
            current:`current-dan`, //設定當前選擇的圓點class

            leftarrow:`left-att`,//設定左箭頭class
            rightarrow:`right-att`//設定右箭頭clas
        });