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 });