一步一步教你寫(xiě)淡入淡出帶注釋的圖片輪播插件（一）
更新時(shí)間：2010年10月11日 21:26:59 作者：
抽空寫(xiě)了個(gè)類(lèi)似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。
前幾天在blueIdea上看到一個(gè)淡入淡出的帶注釋的圖片輪播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代碼，雖然效果達(dá)到了，但是有幾個(gè)地方本人有不同的看法：
1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個(gè)div，通過(guò)不斷push當(dāng)前圖片到那個(gè)div的innerHTML里的方式來(lái)做一個(gè)一個(gè)交替變化。思路雖然有些新意，但是從目標(biāo)效果的運(yùn)行邏輯來(lái)看，通過(guò)改變列表元素的z-index值來(lái)實(shí)現(xiàn)交替變換其實(shí)更符合這個(gè)效果邏輯的初衷。
2.那位作者雖然對(duì)代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，于是乎，這只能是一個(gè)效果，而不能作為一個(gè)可配置的插件。
（ps：以上觀(guān)點(diǎn)純屬就事論事，無(wú)任何懷疑此作者功力的意思。且不同人有不同看法。純屬個(gè)人觀(guān)點(diǎn)）
所以，我自己也抽空寫(xiě)了個(gè)類(lèi)似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個(gè)最終的效果圖吧：
好了，Let's go！開(kāi)始我們的第一部分吧！
第一部分我們要達(dá)到的目標(biāo)有：
1.建立一個(gè)大的框架，實(shí)現(xiàn)變換的邏輯，同時(shí)建立良好的代碼結(jié)構(gòu)，為以后的功能擴(kuò)展打好基礎(chǔ)。（好的開(kāi)始是成功的一半！）
2.第一部分要實(shí)現(xiàn)的效果為圖片自動(dòng)切換（僅僅是這一個(gè)功能）。
首先要有清晰地思路，要實(shí)現(xiàn)這一個(gè)效果，我們一定是調(diào)用一個(gè)初始化函數(shù)init()-->init()中開(kāi)始變換第一張圖片到下一張，不妨?xí)憾ㄟ@個(gè)功能函數(shù)為pos()-->要實(shí)現(xiàn)自動(dòng)交替變換，那么肯定需要一個(gè)自動(dòng)變換的功能函數(shù)auto()-->auto()中自動(dòng)變換應(yīng)該有兩個(gè)方向，向前和向后，那么這個(gè)功能我們也可以通過(guò)一個(gè)函數(shù)來(lái)實(shí)現(xiàn)，暫定move()-->move()中是指定向上或向下一張變換，那么就可以回歸到我們的變換函數(shù)pos()中！
那么，我們就建立了一套完整可行的邏輯體系。根據(jù)以上邏輯，我們用代碼結(jié)構(gòu)來(lái)表示如下：
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
this.pos(this.index); //變換函數(shù)
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
this.pos(m); //變換到上一張或下一張
},
pos:function(i){
this.auto(); //自動(dòng)運(yùn)行
}
}
}();
以上只是我個(gè)人的編碼習(xí)慣：把功能塊都寫(xiě)在一個(gè)閉包里，減少命名沖突，避免全局變量污染。（但是這樣會(huì)有個(gè)問(wèn)題，所有函數(shù)都在閉包里，很可能會(huì)導(dǎo)致ie內(nèi)存泄露，所以還有另外種更好的方式：只把初始化函數(shù)寫(xiě)入閉包，其他功能通過(guò)原型內(nèi)建。這樣同樣可以避免命名沖突和全局變量污染，又同時(shí)減輕了內(nèi)存壓力。這個(gè)優(yōu)化方案將在下一部分一起說(shuō)明）
好了，大的框架出來(lái)了，我們其實(shí)就成功了一半了，以下再根據(jù)每個(gè)模塊具體的功能充實(shí)函數(shù)。由于dom選擇器使我們最常使用的功能，所以這里預(yù)先定義了兩個(gè)全局函數(shù)
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每個(gè)模塊函數(shù)的拆解：
init模塊：
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變量
this.pos(this.index); //變換函數(shù)
},
auto：
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一張或上一張的序號(hào)（注意三元選擇符的運(yùn)用）
this.pos(m); //變換到上一張或下一張
},
pos：
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號(hào)
this.auto(); //自動(dòng)運(yùn)行
}
好了，總的源碼是這樣的：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
恩，這一部分到此結(jié)束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規(guī)避閉包引起的內(nèi)存泄露的優(yōu)化方案！
1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個(gè)div，通過(guò)不斷push當(dāng)前圖片到那個(gè)div的innerHTML里的方式來(lái)做一個(gè)一個(gè)交替變化。思路雖然有些新意，但是從目標(biāo)效果的運(yùn)行邏輯來(lái)看，通過(guò)改變列表元素的z-index值來(lái)實(shí)現(xiàn)交替變換其實(shí)更符合這個(gè)效果邏輯的初衷。
2.那位作者雖然對(duì)代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，于是乎，這只能是一個(gè)效果，而不能作為一個(gè)可配置的插件。
（ps：以上觀(guān)點(diǎn)純屬就事論事，無(wú)任何懷疑此作者功力的意思。且不同人有不同看法。純屬個(gè)人觀(guān)點(diǎn)）
所以，我自己也抽空寫(xiě)了個(gè)類(lèi)似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個(gè)最終的效果圖吧：
好了，Let's go！開(kāi)始我們的第一部分吧！
第一部分我們要達(dá)到的目標(biāo)有：
1.建立一個(gè)大的框架，實(shí)現(xiàn)變換的邏輯，同時(shí)建立良好的代碼結(jié)構(gòu)，為以后的功能擴(kuò)展打好基礎(chǔ)。（好的開(kāi)始是成功的一半！）
2.第一部分要實(shí)現(xiàn)的效果為圖片自動(dòng)切換（僅僅是這一個(gè)功能）。
首先要有清晰地思路，要實(shí)現(xiàn)這一個(gè)效果，我們一定是調(diào)用一個(gè)初始化函數(shù)init()-->init()中開(kāi)始變換第一張圖片到下一張，不妨?xí)憾ㄟ@個(gè)功能函數(shù)為pos()-->要實(shí)現(xiàn)自動(dòng)交替變換，那么肯定需要一個(gè)自動(dòng)變換的功能函數(shù)auto()-->auto()中自動(dòng)變換應(yīng)該有兩個(gè)方向，向前和向后，那么這個(gè)功能我們也可以通過(guò)一個(gè)函數(shù)來(lái)實(shí)現(xiàn)，暫定move()-->move()中是指定向上或向下一張變換，那么就可以回歸到我們的變換函數(shù)pos()中！
那么，我們就建立了一套完整可行的邏輯體系。根據(jù)以上邏輯，我們用代碼結(jié)構(gòu)來(lái)表示如下：
復(fù)制代碼 代碼如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
this.pos(this.index); //變換函數(shù)
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
this.pos(m); //變換到上一張或下一張
},
pos:function(i){
this.auto(); //自動(dòng)運(yùn)行
}
}
}();
以上只是我個(gè)人的編碼習(xí)慣：把功能塊都寫(xiě)在一個(gè)閉包里，減少命名沖突，避免全局變量污染。（但是這樣會(huì)有個(gè)問(wèn)題，所有函數(shù)都在閉包里，很可能會(huì)導(dǎo)致ie內(nèi)存泄露，所以還有另外種更好的方式：只把初始化函數(shù)寫(xiě)入閉包，其他功能通過(guò)原型內(nèi)建。這樣同樣可以避免命名沖突和全局變量污染，又同時(shí)減輕了內(nèi)存壓力。這個(gè)優(yōu)化方案將在下一部分一起說(shuō)明）
好了，大的框架出來(lái)了，我們其實(shí)就成功了一半了，以下再根據(jù)每個(gè)模塊具體的功能充實(shí)函數(shù)。由于dom選擇器使我們最常使用的功能，所以這里預(yù)先定義了兩個(gè)全局函數(shù)
復(fù)制代碼 代碼如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每個(gè)模塊函數(shù)的拆解：
init模塊：
復(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變量
this.pos(this.index); //變換函數(shù)
},
auto：
復(fù)制代碼 代碼如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
復(fù)制代碼 代碼如下:
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一張或上一張的序號(hào)（注意三元選擇符的運(yùn)用）
this.pos(m); //變換到上一張或下一張
},
pos：
復(fù)制代碼 代碼如下:
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號(hào)
this.auto(); //自動(dòng)運(yùn)行
}
好了，總的源碼是這樣的：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
恩，這一部分到此結(jié)束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規(guī)避閉包引起的內(nèi)存泄露的優(yōu)化方案！
您可能感興趣的文章:
- jQuery 淡入淡出、展開(kāi)收縮菜單實(shí)現(xiàn)代碼
- jQeury淡入淡出需要注意的問(wèn)題
- 基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)
- js運(yùn)動(dòng)框架_包括圖片的淡入淡出效果
- js控制淡入淡出示例代碼
- 原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果
- JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- js淡入淡出的圖片輪播效果代碼分享
- js淡入淡出焦點(diǎn)圖幻燈片效果代碼分享
- js如何實(shí)現(xiàn)淡入淡出效果
相關(guān)文章
JavaScript中檢測(cè)變量是否存在遇到的一些問(wèn)題
要檢測(cè)某一變量是否存在，雖然簡(jiǎn)單但是也要細(xì)心，下面整理了幾點(diǎn)，遇到類(lèi)似問(wèn)題的朋友可以參考下2013-11-11
這篇文章主要介紹了js如何找出兩個(gè)數(shù)組中不同的元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
淺析JavaScript對(duì)象轉(zhuǎn)換成原始值
這篇文章主要介紹了淺析JavaScript對(duì)象轉(zhuǎn)換成原始值，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，需要的朋友可以參考一下2022-07-07
JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)
這篇文章主要給大家介紹了關(guān)于JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)的相關(guān)資料,通過(guò)本文介紹的的JavaScript代碼示例,你可以實(shí)現(xiàn)滾動(dòng)條默認(rèn)在最底部的效果,需要的朋友可以參考下2023-10-10
Javascript判斷對(duì)象是否相等實(shí)現(xiàn)代碼
想判斷2個(gè)js對(duì)象，是不是所有完全相同在表單頁(yè)面應(yīng)用是很常見(jiàn)的，接下來(lái)分享一段判斷代碼，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
20行代碼實(shí)現(xiàn)的一個(gè)CSS覆蓋率測(cè)試腳本
這里我們只求CSS規(guī)則的覆蓋率，所以訪(fǎng)問(wèn) querySelectorAll().length 即可。通過(guò)排序就可看出各個(gè)CSS使用情況2013-07-07
微信小程序?qū)崿F(xiàn)彈出層禁止頁(yè)面滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出層禁止頁(yè)面滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在瀏覽器中獲取當(dāng)前執(zhí)行的腳本文件名的代碼
同事提了一個(gè)問(wèn)題，如何在瀏覽器中動(dòng)態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？2011-07-07
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js...2007-09-09