一步一步教你写带图片注释的淡入淡出插件（三）
接上一文，我們已經實現了圖片的自動淡入淡出播放。接下來需要加入控制器。
其實憑借著之前良好的代碼結構，加入控制器很簡單（^_^這也就是為什么我說剛開始的架構的代碼結構很重要！）
先說一下加入控制器的思路：
根據輪播元素的個數為每一個元素添加一個對應的控制按鈕，（這里我直接用a標簽來做，考慮語義的話可以用ul或ol），考慮到書寫樣式的方便可以先create一個控制器父標簽，然后依次把每個控制按鈕append到控制器父標簽，再把父標簽append到我們的輪播模塊中就ok了。然后再為對應的元素添加上對應的css樣式即可
好了，說完思路，咱們動手開始，控制器的繪制應該在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變量nav_wp = document.createElement('div'); //先建一個div作為控制器父標簽，你也可以用<ul>或<ol>來做，語義可能會更好，這里我就不改了nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設置樣式/* ==加入淡入淡出功能 ==*/for(var i=0;i<this.l;i++){this.li[i].o = 100; //為每一個圖片都設置一個透明度變化量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標簽來做控制器，考慮語義的話你也可以用linav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認為'fader-nav'nav.innerHTML = i+1;nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調用之前寫好的pos()函數nav_wp.appendChild(nav);}wp.appendChild(nav_wp); //控制器append到頁面this.pos(this.index); //變換函數},上面的代碼即是加入控制器后的完整init（），總共也就增加了7行代碼。
?
寫到這里，可能有朋友會著急去試了，結果發現根本看不到自己添進去的控制器。。。
呵呵，別忘了，我們是用z-index來控制圖片顯隱的，別人的z-index從一開始就不斷的一個一個增加，而控制器一建出來默認的z-index只是0,當然不可能顯示出來。所以我們還得再加一行代碼來控制這個控制器的z-index。好讓它始終處于輪播元素之上。
所以，在變換函數pos()中，
?
pos:function(i){clearInterval(this.li.a); //清除自動變換計時器clearInterval(this.li[i].f); //清除淡入淡出效果計時器this.z++;this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一nav_wp.style.zIndex = this.z+1; //控制器z-index要始終比輪播元素z-index最大的那個還大1this.cur = i; //綁定當前顯示圖片的正確序號this.li.a = false; //做一個標記，下面要用到，表示清除計時器已經完成//this.auto(); //自動運行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);},上面的代碼其實也就加了一句，在第6行。
?
有了這添加的8句話，再加上相應的css，控制器就初見雛形了。控制器css是這樣的
?
.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;}看下雛形效果吧。
?
<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step2</title> <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;} .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;} --></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(){ function init(anthor,options){this.anchor=anthor; this.init(options);} init.prototype = { 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變量 nav_wp = document.createElement('div'); //先建一個div作為控制器父標簽，你也可以用<ul>或<ol>來做，語義可能會更好，這里我就不改了 nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設置樣式 /* ==加入淡入淡出功能 ==*/ for(var i=0;i<this.l;i++){ this.li[i].o = 100; //為每一個圖片都設置一個透明度變化量 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標簽來做控制器，考慮語義的話你也可以用li nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認為'fader-nav' nav.innerHTML = i+1; nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調用之前寫好的pos()函數 nav_wp.appendChild(nav); } wp.appendChild(nav_wp); //控制器append到頁面 this.pos(this.index); //變換函數 }, auto:function(){ this.li.a = setInterval(new Function(this.anchor+'.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); //清除自動變換計時器 clearInterval(this.li[i].f); //清除淡入淡出效果計時器 this.z++; this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一 nav_wp.style.zIndex = this.z+1; this.cur = i; //綁定當前顯示圖片的正確序號 this.li.a = false; //做一個標記，下面要用到，表示清除計時器已經完成 //this.auto(); //自動運行 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); }, fade:function(i){ if(this.li[i].o>=100){ clearInterval(this.li[i].f); //如果透明度變化完畢，清除計時器 if(!this.li.a){ //確保所有計時器都清除掉之后再開始自動運行。要不然會導致有控制器時點擊過快的話，計時器沒來得及清除就開始下一次變化，功能就亂了 this.auto(); } } else{ this.li[i].o+=5; this.li[i].style.opacity = this.li[i].o/100; this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; } } } return {init:init} }(); // --></script> </head> <body> <div id="fader"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" alt="我是圖片一" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" alt="哈哈，圖片二" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" alt="這是圖片三" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" alt="哈哈，圖片四" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" alt="圖片五來咯" /></li> </ul> </div> <script type="text/javascript"><!-- var fader = new Hongru.fader.init('fader',{ id:'fader' }); // --></script> </body> </html>
發現了吧，咱們還缺個控制器當前的樣式。所以還要添兩句，一句添在init()中
?
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定義控制器當前樣式變量，在pos()中把它賦給對應的那一個在pos()中：
?
?
for(var x=0;x<this.l;x++){nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當前控制器樣式}這樣就ok了，另外再加上當前狀態的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;}好了，這下基本上可以了，再看看效果：
?
<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step2</title> <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;} .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;} .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;} --></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(){ function init(anthor,options){this.anchor=anthor; this.init(options);} init.prototype = { 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.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; this.l = li.length; this.cur = this.z = 0; //當前顯示的圖片序號&&z-index變量 nav_wp = document.createElement('div'); //先建一個div作為控制器父標簽，你也可以用<ul>或<ol>來做，語義可能會更好，這里我就不改了 nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設置樣式 /* ==加入淡入淡出功能 ==*/ for(var i=0;i<this.l;i++){ this.li[i].o = 100; //為每一個圖片都設置一個透明度變化量 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標簽來做控制器，考慮語義的話你也可以用li nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認為'fader-nav' nav.innerHTML = i+1; nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調用之前寫好的pos()函數 nav_wp.appendChild(nav); } wp.appendChild(nav_wp); //控制器append到頁面 this.pos(this.index); //變換函數 }, auto:function(){ this.li.a = setInterval(new Function(this.anchor+'.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); //清除自動變換計時器 clearInterval(this.li[i].f); //清除淡入淡出效果計時器 this.z++; this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一 nav_wp.style.zIndex = this.z+1; this.cur = i; //綁定當前顯示圖片的正確序號 this.li.a = false; //做一個標記，下面要用到，表示清除計時器已經完成 //this.auto(); //自動運行 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)'; } for(var x=0;x<this.l;x++){ nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當前控制器樣式 } this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20); }, fade:function(i){ if(this.li[i].o>=100){ clearInterval(this.li[i].f); //如果透明度變化完畢，清除計時器 if(!this.li.a){ //確保所有計時器都清除掉之后再開始自動運行。要不然會導致有控制器時點擊過快的話，計時器沒來得及清除就開始下一次變化，功能就亂了 this.auto(); } } else{ this.li[i].o+=5; this.li[i].style.opacity = this.li[i].o/100; this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; } } } return {init:init} }(); // --></script> </head> <body> <div id="fader"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" alt="我是圖片一" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" alt="哈哈，圖片二" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" alt="這是圖片三" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" alt="哈哈，圖片四" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" alt="圖片五來咯" /></li> </ul> </div> <script type="text/javascript"><!-- var fader = new Hongru.fader.init('fader',{ id:'fader' }); // --></script> </body> </html>
恩，好了，上面這個效果其實大多數情況下已經夠用了，不過有朋友有更多需求，想在底部加一個圖片備注的層，這一個功能在下一部分實現吧！
總結
以上是生活随笔為你收集整理的一步一步教你写带图片注释的淡入淡出插件（三）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hibernate HQL基础 投影查询
- 下一篇： GRUB2 管理器—Grub Custo