一步一步教你写淡入淡出带注释的图片轮播插件（一）
前幾天在blueIdea上看到一個淡入淡出的帶注釋的圖片輪播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代碼，雖然效果達到了，但是有幾個地方本人有不同的看法：
1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個div，通過不斷push當前圖片到那個div的innerHTML里的方式來做一個一個交替變化。思路雖然有些新意，但是從目標效果的運行邏輯來看，通過改變列表元素的z-index值來實現交替變換其實更符合這個效果邏輯的初衷。
2.那位作者雖然對代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，于是乎，這只能是一個效果，而不能作為一個可配置的插件。
（ps：以上觀點純屬就事論事，無任何懷疑此作者功力的意思。且不同人有不同看法。純屬個人觀點）
所以，我自己也抽空寫了個類似的效果，做了一定程度的封裝，雖然也只能勉強算個輕量級原生小插件吧，但還是分享出來，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個最終的效果圖吧：
好了，Let's go！開始我們的第一部分吧！
第一部分我們要達到的目標有：
1.建立一個大的框架，實現變換的邏輯，同時建立良好的代碼結構，為以后的功能擴展打好基礎。（好的開始是成功的一半！）
2.第一部分要實現的效果為圖片自動切換（僅僅是這一個功能）。
首先要有清晰地思路，要實現這一個效果，我們一定是調用一個初始化函數init()-->init()中開始變換第一張圖片到下一張，不妨暫定這個功能函數為pos()-->要實現自動交替變換，那么肯定需要一個自動變換的功能函數auto()-->auto()中自動變換應該有兩個方向，向前和向后，那么這個功能我們也可以通過一個函數來實現，暫定move()-->move()中是指定向上或向下一張變換，那么就可以回歸到我們的變換函數pos()中！
那么，我們就建立了一套完整可行的邏輯體系。根據以上邏輯，我們用代碼結構來表示如下：
?
var Hongru={}; Hongru.fader = function(){return{init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號this.pos(this.index); //變換函數},auto:function(){setInterval(new Function('Hongru.fader.move(1)'),this.a*1000); },move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張this.pos(m); //變換到上一張或下一張},pos:function(i){this.auto(); //自動運行}} }();以上只是我個人的編碼習慣：把功能塊都寫在一個閉包里，減少命名沖突，避免全局變量污染。（但是這樣會有個問題，所有函數都在閉包里，很可能會導致ie內存泄露，所以還有另外種更好的方式：只把初始化函數寫入閉包，其他功能通過原型內建。這樣同樣可以避免命名沖突和全局變量污染，又同時減輕了內存壓力。這個優化方案將在下一部分一起說明）
?
好了，大的框架出來了，我們其實就成功了一半了，以下再根據每個模塊具體的功能充實函數。由于dom選擇器使我們最常使用的功能，所以這里預先定義了兩個全局函數
?
function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)}相信大家都懂。
?
下面是每個模塊函數的拆解：
init模塊：
?
init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號var wp = H$(options.id), // 獲取圖片列表父元素ul = H$$('ul',wp)[0], // 獲取li = this.li = H$$('li',ul);this.a = options.auto?options.auto:2; //自動運行間隔this.index = options.position?options.position:0; //開始運行的圖片序號（從0開始）this.l = li.length;this.cur = this.z = 0; //當前顯示的圖片序號&&z-index變量this.pos(this.index); //變換函數},auto：
?
?
auto:function(){this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000); },move：
?
?
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張var n = this.cur+i; var m = i==1?n==this.l?0:n:n<0?this.l-1: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; //綁定當前顯示圖片的正確序號this.auto(); //自動運行}好了，總的源碼是這樣的：
?
<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step1</title> <mce:style type="text/css"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} --></mce:style><style type="text/css" _mce_bogus="1"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} --></style> <script type="text/javascript"><!-- var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)} Hongru.fader = function(){ return{ init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號 var wp = H$(options.id), // 獲取圖片列表父元素 ul = H$$('ul',wp)[0], // 獲取 li = this.li = H$$('li',ul); this.a = options.auto?options.auto:2; //自動運行間隔 this.index = options.position?options.position:0; //開始運行的圖片序號（從0開始） this.l = li.length; this.cur = this.z = 0; //當前顯示的圖片序號&&z-index變量 this.pos(this.index); //變換函數 }, auto:function(){ this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000); }, move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張 var n = this.cur+i; var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一張或上一張的序號（注意三元選擇符的運用） this.pos(m); //變換到上一張或下一張 }, pos:function(i){ clearInterval(this.li.a); this.z++; this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一 this.cur = i; //綁定當前顯示圖片的正確序號 this.auto(); //自動運行 } } }(); // --></script> </head> <body> <div id="fader"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://www.cnblogs.com/hongru/1.jpg" alt="我是圖片一" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://www.cnblogs.com/hongru/2.jpg" alt="哈哈，圖片二" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://www.cnblogs.com/hongru/3.jpg" alt="這是圖片三" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://www.cnblogs.com/hongru/4.jpg" alt="哈哈，圖片四" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://www.cnblogs.com/hongru/5.jpg" alt="圖片五來咯" /></li> </ul> </div> <script type="text/javascript"><!-- Hongru.fader.init({ id:'fader' }); // --></script> </body> </html>
恩，這一部分到此結束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規避閉包引起的內存泄露的優化方案！
總結
以上是生活随笔為你收集整理的一步一步教你写淡入淡出带注释的图片轮播插件（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vs2010--缓存类
- 下一篇： 企业文件服务器资源管理方案