不出意外的話，這應該是這個系列的最後一部分了。
第三部分的效果已經基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續博文吧。
其實帶背景半透明的備注的輪播效果也是網上一抓一大把，163,qq，taobao等等，仔細找找應該都能看到類似的效果。添加文本其實和前一文的添加控制器的方法差不多。無非也就是再append一個元素，在裡面顯示文本即可。
復制代碼 代碼如下:
/* -- 顯示備注 --*/
var alt = this.alt = document.createElement('p'); //添加一個p標簽，用於顯示文本
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() 函數裡添加的兩段代碼。都很易懂。就不細講了。另外。同樣要在變換函數裡改變z-index值，讓控制器處於最高，文本層次之，同時再把alt文本寫入到這個文本層裡面，如果需要滑動效果的話，在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'; //做文字滑動效果
恩，這樣就差不多了。再看看最後的效果吧。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
恩，文章最後，差點忘了說一個很關鍵的點，就是options的配置參數：
在實例化 new Hongru.fader.init()的時候，第二個參數即為配置參數，是個對象，可選配置參數如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當前狀態className
index: //(可選)初始化時從第幾個位置開始播放，默認為0,即第一個元素
}
好了，這一系列到此結束！！源碼大家可以自行更改