一步一步教你寫(xiě)帶圖片注釋的淡入淡出插件（三）
更新時(shí)間：2010年10月11日 22:13:19 作者：
接上一文，我們已經(jīng)實(shí)現(xiàn)了圖片的自動(dòng)淡入淡出播放。接下來(lái)需要加入控制器。
其實(shí)憑借著之前良好的代碼結(jié)構(gòu)，加入控制器很簡(jiǎn)單（^_^這也就是為什么我說(shuō)剛開(kāi)始的架構(gòu)的代碼結(jié)構(gòu)很重要?。?
先說(shuō)一下加入控制器的思路：
根據(jù)輪播元素的個(gè)數(shù)為每一個(gè)元素添加一個(gè)對(duì)應(yīng)的控制按鈕，（這里我直接用a標(biāo)簽來(lái)做，考慮語(yǔ)義的話(huà)可以用ul或ol），考慮到書(shū)寫(xiě)樣式的方便可以先create一個(gè)控制器父標(biāo)簽，然后依次把每個(gè)控制按鈕append到控制器父標(biāo)簽，再把父標(biāo)簽append到我們的輪播模塊中就ok了。然后再為對(duì)應(yīng)的元素添加上對(duì)應(yīng)的css樣式即可
好了，說(shuō)完思路，咱們動(dòng)手開(kāi)始，控制器的繪制應(yīng)該在init()中。所以我們可以這樣寫(xiě)：
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動(dòng)運(yùn)行間隔
this.index = options.position?options.position:0; //開(kāi)始運(yùn)行的圖片序號(hào)（從0開(kāi)始）
this.l = li.length;
this.cur = this.z = 0; //當(dāng)前顯示的圖片序號(hào)&&z-index變量
nav_wp = document.createElement('div'); //先建一個(gè)div作為控制器父標(biāo)簽，你也可以用<ul>或<ol>來(lái)做，語(yǔ)義可能會(huì)更好，這里我就不改了
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設(shè)置樣式
/* ==加入淡入淡出功能 ==*/
for(var i=0;i<this.l;i++){
this.li[i].o = 100; //為每一個(gè)圖片都設(shè)置一個(gè)透明度變化量
this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用濾鏡
/* == 繪制控制器 == */
var nav = document.createElement('a'); //這里我就直接用a標(biāo)簽來(lái)做控制器，考慮語(yǔ)義的話(huà)你也可以用li
nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認(rèn)為'fader-nav'
nav.innerHTML = i+1;
nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調(diào)用之前寫(xiě)好的pos()函數(shù)
nav_wp.appendChild(nav);
}
wp.appendChild(nav_wp); //控制器append到頁(yè)面
this.pos(this.index); //變換函數(shù)
},
上面的代碼即是加入控制器后的完整init（），總共也就增加了7行代碼。
寫(xiě)到這里，可能有朋友會(huì)著急去試了，結(jié)果發(fā)現(xiàn)根本看不到自己添進(jìn)去的控制器。。。
呵呵，別忘了，我們是用z-index來(lái)控制圖片顯隱的，別人的z-index從一開(kāi)始就不斷的一個(gè)一個(gè)增加，而控制器一建出來(lái)默認(rèn)的z-index只是0,當(dāng)然不可能顯示出來(lái)。所以我們還得再加一行代碼來(lái)控制這個(gè)控制器的z-index。好讓它始終處于輪播元素之上。
所以，在變換函數(shù)pos()中，
pos:function(i){
clearInterval(this.li.a); //清除自動(dòng)變換計(jì)時(shí)器
clearInterval(this.li[i].f); //清除淡入淡出效果計(jì)時(shí)器
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
nav_wp.style.zIndex = this.z+1; //控制器z-index要始終比輪播元素z-index最大的那個(gè)還大1
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號(hào)
this.li.a = false; //做一個(gè)標(biāo)記，下面要用到，表示清除計(jì)時(shí)器已經(jīng)完成
//this.auto(); //自動(dòng)運(yùn)行
if(this.li[i].o>=100){ //在圖片淡入之前先把圖片透明度置為透明
this.li[i].o = 0;
this.li[i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
},
上面的代碼其實(shí)也就加了一句，在第6行。
有了這添加的8句話(huà)，再加上相應(yīng)的css，控制器就初見(jiàn)雛形了?？刂破鱟ss是這樣的
看下雛形效果吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
發(fā)現(xiàn)了吧，咱們還缺個(gè)控制器當(dāng)前的樣式。所以還要添兩句，一句添在init()中
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定義控制器當(dāng)前樣式變量，在pos()中把它賦給對(duì)應(yīng)的那一個(gè)
在pos()中：
for(var x=0;x<this.l;x++){
nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當(dāng)前控制器樣式
}
這樣就ok了，另外再加上當(dāng)前狀態(tài)的css樣式：
.fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
好了，這下基本上可以了，再看看效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
恩，好了，上面這個(gè)效果其實(shí)大多數(shù)情況下已經(jīng)夠用了，不過(guò)有朋友有更多需求，想在底部加一個(gè)圖片備注的層，這一個(gè)功能在下一部分實(shí)現(xiàn)吧！
先說(shuō)一下加入控制器的思路：
根據(jù)輪播元素的個(gè)數(shù)為每一個(gè)元素添加一個(gè)對(duì)應(yīng)的控制按鈕，（這里我直接用a標(biāo)簽來(lái)做，考慮語(yǔ)義的話(huà)可以用ul或ol），考慮到書(shū)寫(xiě)樣式的方便可以先create一個(gè)控制器父標(biāo)簽，然后依次把每個(gè)控制按鈕append到控制器父標(biāo)簽，再把父標(biāo)簽append到我們的輪播模塊中就ok了。然后再為對(duì)應(yīng)的元素添加上對(duì)應(yīng)的css樣式即可
好了，說(shuō)完思路，咱們動(dòng)手開(kāi)始，控制器的繪制應(yīng)該在init()中。所以我們可以這樣寫(xiě)：
復(fù)制代碼 代碼如下:
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動(dòng)運(yùn)行間隔
this.index = options.position?options.position:0; //開(kāi)始運(yùn)行的圖片序號(hào)（從0開(kāi)始）
this.l = li.length;
this.cur = this.z = 0; //當(dāng)前顯示的圖片序號(hào)&&z-index變量
nav_wp = document.createElement('div'); //先建一個(gè)div作為控制器父標(biāo)簽，你也可以用<ul>或<ol>來(lái)做，語(yǔ)義可能會(huì)更好，這里我就不改了
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設(shè)置樣式
/* ==加入淡入淡出功能 ==*/
for(var i=0;i<this.l;i++){
this.li[i].o = 100; //為每一個(gè)圖片都設(shè)置一個(gè)透明度變化量
this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用濾鏡
/* == 繪制控制器 == */
var nav = document.createElement('a'); //這里我就直接用a標(biāo)簽來(lái)做控制器，考慮語(yǔ)義的話(huà)你也可以用li
nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認(rèn)為'fader-nav'
nav.innerHTML = i+1;
nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調(diào)用之前寫(xiě)好的pos()函數(shù)
nav_wp.appendChild(nav);
}
wp.appendChild(nav_wp); //控制器append到頁(yè)面
this.pos(this.index); //變換函數(shù)
},
上面的代碼即是加入控制器后的完整init（），總共也就增加了7行代碼。
寫(xiě)到這里，可能有朋友會(huì)著急去試了，結(jié)果發(fā)現(xiàn)根本看不到自己添進(jìn)去的控制器。。。
呵呵，別忘了，我們是用z-index來(lái)控制圖片顯隱的，別人的z-index從一開(kāi)始就不斷的一個(gè)一個(gè)增加，而控制器一建出來(lái)默認(rèn)的z-index只是0,當(dāng)然不可能顯示出來(lái)。所以我們還得再加一行代碼來(lái)控制這個(gè)控制器的z-index。好讓它始終處于輪播元素之上。
所以，在變換函數(shù)pos()中，
復(fù)制代碼 代碼如下:
pos:function(i){
clearInterval(this.li.a); //清除自動(dòng)變換計(jì)時(shí)器
clearInterval(this.li[i].f); //清除淡入淡出效果計(jì)時(shí)器
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
nav_wp.style.zIndex = this.z+1; //控制器z-index要始終比輪播元素z-index最大的那個(gè)還大1
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號(hào)
this.li.a = false; //做一個(gè)標(biāo)記，下面要用到，表示清除計(jì)時(shí)器已經(jīng)完成
//this.auto(); //自動(dòng)運(yùn)行
if(this.li[i].o>=100){ //在圖片淡入之前先把圖片透明度置為透明
this.li[i].o = 0;
this.li[i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
},
上面的代碼其實(shí)也就加了一句，在第6行。
有了這添加的8句話(huà)，再加上相應(yīng)的css，控制器就初見(jiàn)雛形了?？刂破鱟ss是這樣的
復(fù)制代碼 代碼如下:
.fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
看下雛形效果吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
發(fā)現(xiàn)了吧，咱們還缺個(gè)控制器當(dāng)前的樣式。所以還要添兩句，一句添在init()中
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定義控制器當(dāng)前樣式變量，在pos()中把它賦給對(duì)應(yīng)的那一個(gè)
在pos()中：
for(var x=0;x<this.l;x++){
nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當(dāng)前控制器樣式
}
這樣就ok了，另外再加上當(dāng)前狀態(tài)的css樣式：
.fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
好了，這下基本上可以了，再看看效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
恩，好了，上面這個(gè)效果其實(shí)大多數(shù)情況下已經(jīng)夠用了，不過(guò)有朋友有更多需求，想在底部加一個(gè)圖片備注的層，這一個(gè)功能在下一部分實(shí)現(xiàn)吧！
相關(guān)文章
php結(jié)合js實(shí)現(xiàn)多條件組合查詢(xún)
這篇文章主要為大家詳細(xì)介紹了php結(jié)合js實(shí)現(xiàn)多條件組合查詢(xún)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了JS基于正則截取替換特定字符之間字符串操作方法,結(jié)合具體實(shí)例形式分析了JS基于正則實(shí)現(xiàn)針對(duì)特殊字符、數(shù)字等字符串類(lèi)型的截取操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
JavaScript中利用for循環(huán)遍歷數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript中利用for循環(huán)遍歷數(shù)組，最好不要使用for in遍歷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡
這篇文章主要介紹了如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目2
這篇文章主要為大家分享了Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
一分鐘理解JavaScript閉包，關(guān)于JavaScript閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是JavaScript閉包，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
微信小程序如何獲取群聊的openGid以及名稱(chēng)詳解
這篇文章主要介紹了小程序如何獲取群聊的openGid以及名稱(chēng)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解
排序也稱(chēng)排序算法 (Sort Algorithm)，排序是將 一組數(shù)據(jù) ， 依指定的順序 進(jìn)行 排列的過(guò)程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下2019-06-06
過(guò)濾空格，尤其是在一些注冊(cè)頁(yè)面比較實(shí)用，可以用js在客戶(hù)端將空格過(guò)濾掉，減輕服務(wù)器端的負(fù)擔(dān)，下面是實(shí)現(xiàn)函數(shù)2014-10-10