一步一步教你写带图片注释的淡入淡出插件（四）
不出意外的話，這應(yīng)該是這個系列的最后一部分了。
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續(xù)博文吧。
其實帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細(xì)找找應(yīng)該都能看到類似的效果。添加文本其實和前一文的添加控制器的方法差不多。無非也就是再append一個元素，在里面顯示文本即可。
?
/* -- 顯示備注 --*/var alt = this.alt = document.createElement('p'); //添加一個p標(biāo)簽，用于顯示文本
this.img = [];
for(var k=0;k<this.l;k++){
this.img.push(H$$('img',this.li[k])[0]); //提取輪播模塊里的圖片，目的是取alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight;
alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //為這個層添加樣式
?
上面是init() 函數(shù)里添加的兩段代碼。都很易懂。就不細(xì)講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時再把a(bǔ)lt文本寫入到這個文本層里面，如果需要滑動效果的話，在pos()里面把高度清0，在fade()里做高度變換即可（同樣也可以用top或left來做）；故pos()里改動代碼如下：
?
?
this.alt.style.zIndex = this.z+1;nav_wp.style.zIndex = this.z+2;
.
this.alt.style.height = 0; //做備注層的滑動效果
.
this.alt.innerHTML = this.img[i].alt; //植入alt文本
?
如果文本層有高度變化效果的話，fade()里面加一句文本層的高度變化即可：
?
?
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動效果?
恩，這樣就差不多了。再看看最后的效果吧。
?
?
<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step4</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參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動運(yùn)行時間；index（可選）：開始的運(yùn)行的圖片序號 var wp = H$(options.id), // 獲取圖片列表父元素 ul = H$$('ul',wp)[0], // 獲取 li = this.li = H$$('li',ul); this.a = options.auto?options.auto:2; //自動運(yùn)行間隔 this.index = options.position?options.position:0; //開始運(yùn)行的圖片序號（從0開始） this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; this.l = li.length; this.cur = this.z = 0; //當(dāng)前顯示的圖片序號&&z-index變量 nav_wp = document.createElement('div'); //先建一個div作為控制器父標(biāo)簽，你也可以用<ul>或<ol>來做，語義可能會更好，這里我就不改了 nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設(shè)置樣式 /* -- 顯示備注 --*/ var alt = this.alt = document.createElement('p'); //添加一個p標(biāo)簽，用于顯示文本 this.img = []; for(var k=0;k<this.l;k++){ this.img.push(H$$('img',this.li[k])[0]); //提取輪播模塊里的圖片，目的是取alt } /* ==加入淡入淡出功能 ==*/ for(var i=0;i<this.l;i++){ this.li[i].o = 100; //為每一個圖片都設(shè)置一個透明度變化量 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)簽來做控制器，考慮語義的話你也可以用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)用之前寫好的pos()函數(shù) nav_wp.appendChild(nav); } wp.appendChild(alt); // wp.appendChild(nav_wp); //控制器append到頁面 this.textH = nav_wp.offsetHeight; alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //為這個層添加樣式 this.pos(this.index); //變換函數(shù) }, auto:function(){ this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); }, 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; //下一張或上一張的序號（注意三元選擇符的運(yù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加一 this.alt.style.zIndex = this.z+1; nav_wp.style.zIndex = this.z+2; this.cur = i; //綁定當(dāng)前顯示圖片的正確序號 this.li.a = false; //做一個標(biāo)記，下面要用到，表示清除計時器已經(jīng)完成 //this.auto(); //自動運(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.alt.style.height = 0; //做備注層的滑動效果 } this.alt.innerHTML = this.img[i].alt; //植入alt文本 for(var x=0;x<this.l;x++){ nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當(dāng)前控制器樣式 } 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){ //確保所有計時器都清除掉之后再開始自動運(yùn)行。要不然會導(dǎo)致有控制器時點(diǎn)擊過快的話，計時器沒來得及清除就開始下一次變化，功能就亂了 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+')'; this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動效果 } } } 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>
恩，文章最后，差點(diǎn)忘了說一個很關(guān)鍵的點(diǎn)，就是options的配置參數(shù)：
在實例化 new Hongru.fader.init()的時候，第二個參數(shù)即為配置參數(shù)，是個對象，可選配置參數(shù)如下
{
id: ?//(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時從第幾個位置開始播放，默認(rèn)為0,即第一個元素?
}
好了，這一系列到此結(jié)束！！源碼大家可以自行更改
總結(jié)
以上是生活随笔為你收集整理的一步一步教你写带图片注释的淡入淡出插件（四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Exchange2010应用地址列表
- 下一篇： Dos批处理检测NetFramework