摘要:點(diǎn)擊左箭頭判斷是否到邊緣最后給輪播圖添加自動(dòng)播放功能,即利用定時(shí)器每秒觸發(fā)一次右箭頭的點(diǎn)擊事件。將返回的定時(shí)器保存到實(shí)例屬性中,以便在鼠標(biāo)懸停的時(shí)候停止自動(dòng)輪播。
??這是一個(gè)輪播圖組件,你可以直接下載使用,這里是代碼地址,需要傳入容器的id和圖片地址,支持Internet Explorer 10+、Firefox、Opera和Chrome等現(xiàn)代瀏覽器。這里是原文地址。
??之前寫一些功能或是特效都是寫在一個(gè)個(gè)函數(shù)里,可能因?yàn)槲沂怯?b>c語(yǔ)言入門編程,所以更傾向于面向過(guò)程的編程方式,沒有想過(guò)將一個(gè)模塊抽象成為對(duì)象,做成組件。但是由于嘗到了重復(fù)造輪子之苦。我決定將不可復(fù)用的代碼做成組件,提高編程效率。以下就是我做輪播圖組件的全部過(guò)程,由于是第一次寫組件,如果有哪里思維不對(duì),或?qū)懙姆绞接袉?wèn)題,還希望不吝賜教,共同學(xué)習(xí)。
??首先看一下如何使用這個(gè)組件,用到了font-awesome圖標(biāo)庫(kù),然后調(diào)用輪播圖的css,最后是用戶自己的css,用戶必須設(shè)置容器id以及容器寬高,否則無(wú)法正常顯示。生成輪播圖時(shí)給構(gòu)造函數(shù)傳入容器元素,以及圖片地址:
輪播圖
??下邊我們看下具體實(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; //輪播圖當(dāng)前頁(yè) this.settimeID; //定時(shí)器id this.init(obj.urlArr); }
??基本思路就是在構(gòu)造函數(shù)里寫入輪播圖的實(shí)例屬性,不同的輪播圖具有不同的實(shí)例屬性,將其共同擁有的方法寫成原型屬性,完整代碼請(qǐng)到github上查看,喜歡的可以順手給個(gè)星。原型對(duì)象的基本結(jié)構(gòu)如下所示:
Carousel.prototype = { constructor: Carousel, //構(gòu)造函數(shù)指向原函數(shù) init: function(urlArr){}, //構(gòu)建DOM結(jié)構(gòu) bindEvent: function(){}, //綁定事件 pageActiveColor: function(){}, //繪制圓點(diǎn) leftAngleclick: function(){}, //點(diǎn)擊左箭頭 rightAngleclick: function(){}, selectPage: function(selectNum){}, //點(diǎn)擊圓點(diǎn)定位到指定圖片 setTime: function(){}, //自動(dòng)播放 clearTime: function(){} //鼠標(biāo)懸浮取消自動(dòng)播放 }
??建立dom結(jié)構(gòu)的代碼如下,根據(jù)容器的id生成后代dom節(jié)點(diǎn)的id以及class,然后在css中使用[attribute$=value]選擇器對(duì)不同輪播圖使用同樣的樣式。而在代碼中也可以根據(jù)其容器id來(lái)區(qū)分不同輪播圖中的類似元素。因?yàn)橐С州啿D寬度自適應(yīng),所以采用來(lái)百分比設(shè)置后代元素寬度。
init: function(urlArr) { //創(chuàng)建dom結(jié)構(gòu) this.wrap.style.position = "relative"; this.wrap.style.overflow = "hidden"; this.wrap.innerHTML = "
??創(chuàng)建的結(jié)構(gòu)大體上如圖下所示:#id代表用戶定義的容器,生成一個(gè)#(id)_container的包裹元素,寬度是容器寬度的圖片張數(shù)倍,.(id)_img-item[n]的寬度和高度都等同于容器,圖片在各自的.(id)_img-item[n]里鋪滿。給容器定義屬性position: relative,通過(guò)設(shè)置了絕對(duì)定位的#(id)_container的left值來(lái)實(shí)現(xiàn)輪播。
??為左右箭頭以及下邊的小圓點(diǎn)添加事件,在鼠標(biāo)移入輪播圖時(shí)停止自動(dòng)播放,移出時(shí)設(shè)置自動(dòng)播放。需要注意的是addEventListener的第二個(gè)參數(shù)必須是bind了this后的函數(shù)。因?yàn)檎{(diào)用環(huán)境自帶的函數(shù)會(huì)使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)); }
??切換圖片的基本思路就是改變實(shí)例屬性中的當(dāng)前頁(yè)這個(gè)變量,然后根據(jù)這個(gè)變量的值對(duì)包裹元素進(jìn)行定位,再使對(duì)應(yīng)的小圓點(diǎn)變色。下邊是點(diǎn)擊左箭頭觸發(fā)的函數(shù),判斷如果處于邊緣就跳到最后。點(diǎn)擊右箭頭和下邊圓點(diǎn)的事件與之類似。
leftAngleclick: function() { //點(diǎn)擊左箭頭 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(); }
??最后給輪播圖添加自動(dòng)播放功能,即利用定時(shí)器每3秒觸發(fā)一次右箭頭的點(diǎn)擊事件。將返回的定時(shí)器保存到實(shí)例屬性中,以便在鼠標(biāo)懸停的時(shí)候停止自動(dòng)輪播。
setTime: function() { //自動(dòng)播放 let wrapId = this.wrapId; //解決this綁定丟失 this.settimeID = setInterval(function() { document.getElementById(wrapId + "_next").click(); } , 3000); console.log("set"); }, clearTime: function() { //鼠標(biāo)懸浮取消自動(dòng)播放 let theId = this.settimeID; //解決this綁定丟失 console.log("clear"); clearInterval(theId); }
??到這輪播圖組件就算寫好了,這可以讓我們少寫很多代碼,而且可以在一個(gè)頁(yè)面中多次使用,不會(huì)污染到全局變量。缺陷在于這時(shí)的輪播圖還不能支持10張以上的圖片,因?yàn)榭紤]到這種需求并不是很多,就沒有寫10張以上的判斷條件,有需要時(shí)可以自行添加。有什么意見或建議歡迎留言。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/112347.html
摘要:點(diǎn)擊左箭頭判斷是否到邊緣最后給輪播圖添加自動(dòng)播放功能,即利用定時(shí)器每秒觸發(fā)一次右箭頭的點(diǎn)擊事件。將返回的定時(shí)器保存到實(shí)例屬性中,以便在鼠標(biāo)懸停的時(shí)候停止自動(dòng)輪播。 ??這是一個(gè)輪播圖組件,你可以直接下載使用,這里是代碼地址,需要傳入容器的id和圖片地址,支持Internet Explorer 10+、Firefox、Opera和Chrome等現(xiàn)代瀏覽器。這里是原文地址。 ??之前寫一些...
摘要:寫好樣式,只需改變每張圖片的即可實(shí)現(xiàn)輪播效果。可以將輪播圖看成兩個(gè),如圖所示寫好每個(gè)的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個(gè)輪播圖部分,設(shè)置一個(gè),定時(shí)改變。 原文地址:Bougie的博客 先展示最終效果:showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數(shù)據(jù)驅(qū)動(dòng)視圖,所以拒...
摘要:寫好樣式,只需改變每張圖片的即可實(shí)現(xiàn)輪播效果。可以將輪播圖看成兩個(gè),如圖所示寫好每個(gè)的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個(gè)輪播圖部分,設(shè)置一個(gè),定時(shí)改變。 原文地址:Bougie的博客 先展示最終效果:showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數(shù)據(jù)驅(qū)動(dòng)視圖,所以拒...
摘要:寫好樣式,只需改變每張圖片的即可實(shí)現(xiàn)輪播效果。可以將輪播圖看成兩個(gè),如圖所示寫好每個(gè)的樣式容器寬度容器高度大圖片寬度小圖片寬度小圖片高度模板包含兩個(gè)輪播圖部分,設(shè)置一個(gè),定時(shí)改變。 原文地址:Bougie的博客 先展示最終效果:showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以數(shù)據(jù)驅(qū)動(dòng)視圖,所以拒...
閱讀 3722·2021-11-23 09:51
閱讀 1385·2021-11-10 14:35
閱讀 4024·2021-09-22 15:01
閱讀 1293·2021-08-19 11:12
閱讀 392·2019-08-30 15:53
閱讀 1703·2019-08-29 13:04
閱讀 3440·2019-08-29 12:52
閱讀 3069·2019-08-23 16:14