一步一步教你写带图片注释的淡入淡出插件（四）

　　不出意外的话，这应该是这个系列的最后一部分了。

　　第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。

　　其实带背景半透明的备注的轮播效果也是网上一抓一大把，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'; //做文字滑动效果

　　恩，这样就差不多了。再看看最后的效果吧。

<!Doctype html> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>step4</title> 
<style type="text/css"></style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Avar%20Hongru%3D%7B%7D%3B%20%0D%0Afunction%20H%24(id)%7Breturn%20document.getElementById(id)%7D%20%0D%0Afunction%20H%24%24(c%2Cp)%7Breturn%20p.getElementsByTagName(c)%7D%20%0D%0AHongru.fader%20%3D%20function()%7B%20%0D%0Afunction%20init(anthor%2Coptions)%7Bthis.anchor%3Danthor%3B%20this.init(options)%3B%7D%20%0D%0Ainit.prototype%20%3D%20%7B%20%0D%0Ainit%3Afunction(options)%7B%20%2F%2Foptions%E5%8F%82%E6%95%B0%EF%BC%9Aid%EF%BC%88%E5%BF%85%E9%80%89%EF%BC%89%EF%BC%9A%E5%9B%BE%E7%89%87%E5%88%97%E8%A1%A8%E7%88%B6%E6%A0%87%E7%AD%BEid%EF%BC%9Bauto%EF%BC%88%E5%8F%AF%E9%80%89%EF%BC%89%EF%BC%9A%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4%EF%BC%9Bindex%EF%BC%88%E5%8F%AF%E9%80%89%EF%BC%89%EF%BC%9A%E5%BC%80%E5%A7%8B%E7%9A%84%E8%BF%90%E8%A1%8C%E7%9A%84%E5%9B%BE%E7%89%87%E5%BA%8F%E5%8F%B7%20%0D%0Avar%20wp%20%3D%20H%24(options.id)%2C%20%2F%2F%20%E8%8E%B7%E5%8F%96%E5%9B%BE%E7%89%87%E5%88%97%E8%A1%A8%E7%88%B6%E5%85%83%E7%B4%A0%20%0D%0Aul%20%3D%20H%24%24('ul'%2Cwp)%5B0%5D%2C%20%2F%2F%20%E8%8E%B7%E5%8F%96%20%0D%0Ali%20%3D%20this.li%20%3D%20H%24%24('li'%2Cul)%3B%20%0D%0Athis.a%20%3D%20options.auto%3Foptions.auto%3A2%3B%20%2F%2F%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C%E9%97%B4%E9%9A%94%20%0D%0Athis.index%20%3D%20options.position%3Foptions.position%3A0%3B%20%2F%2F%E5%BC%80%E5%A7%8B%E8%BF%90%E8%A1%8C%E7%9A%84%E5%9B%BE%E7%89%87%E5%BA%8F%E5%8F%B7%EF%BC%88%E4%BB%8E0%E5%BC%80%E5%A7%8B%EF%BC%89%20%0D%0Athis.curC%20%3D%20options.curNavClass%3Foptions.curNavClass%3A'fader-cur-nav'%3B%20%0D%0Athis.l%20%3D%20li.length%3B%20%0D%0Athis.cur%20%3D%20this.z%20%3D%200%3B%20%2F%2F%E5%BD%93%E5%89%8D%E6%98%BE%E7%A4%BA%E7%9A%84%E5%9B%BE%E7%89%87%E5%BA%8F%E5%8F%B7%26%26z-index%E5%8F%98%E9%87%8F%20%0D%0Anav_wp%20%3D%20document.createElement('div')%3B%20%2F%2F%E5%85%88%E5%BB%BA%E4%B8%80%E4%B8%AAdiv%E4%BD%9C%E4%B8%BA%E6%8E%A7%E5%88%B6%E5%99%A8%E7%88%B6%E6%A0%87%E7%AD%BE%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%94%A8%3Cul%3E%E6%88%96%3Col%3E%E6%9D%A5%E5%81%9A%EF%BC%8C%E8%AF%AD%E4%B9%89%E5%8F%AF%E8%83%BD%E4%BC%9A%E6%9B%B4%E5%A5%BD%EF%BC%8C%E8%BF%99%E9%87%8C%E6%88%91%E5%B0%B1%E4%B8%8D%E6%94%B9%E4%BA%86%20%0D%0Anav_wp.style.cssText%20%3D%20'position%3Aabsolute%3Bright%3A0%3Bbottom%3A0%3Bpadding%3A8px%200%3B'%3B%20%2F%2F%E4%B8%BA%E5%AE%83%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F%20%0D%0A%2F*%20--%20%E6%98%BE%E7%A4%BA%E5%A4%87%E6%B3%A8%20--*%2F%20%0D%0Avar%20alt%20%3D%20this.alt%20%3D%20document.createElement('p')%3B%20%2F%2F%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AAp%E6%A0%87%E7%AD%BE%EF%BC%8C%E7%94%A8%E4%BA%8E%E6%98%BE%E7%A4%BA%E6%96%87%E6%9C%AC%20%0D%0Athis.img%20%3D%20%5B%5D%3B%20%0D%0Afor(var%20k%3D0%3Bk%3Cthis.l%3Bk%2B%2B)%7B%20%0D%0Athis.img.push(H%24%24('img'%2Cthis.li%5Bk%5D)%5B0%5D)%3B%20%2F%2F%E6%8F%90%E5%8F%96%E8%BD%AE%E6%92%AD%E6%A8%A1%E5%9D%97%E9%87%8C%E7%9A%84%E5%9B%BE%E7%89%87%EF%BC%8C%E7%9B%AE%E7%9A%84%E6%98%AF%E5%8F%96alt%20%0D%0A%7D%20%0D%0A%2F*%20%3D%3D%E5%8A%A0%E5%85%A5%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA%E5%8A%9F%E8%83%BD%20%3D%3D*%2F%20%0D%0Afor(var%20i%3D0%3Bi%3Cthis.l%3Bi%2B%2B)%7B%20%0D%0Athis.li%5Bi%5D.o%20%3D%20100%3B%20%2F%2F%E4%B8%BA%E6%AF%8F%E4%B8%80%E4%B8%AA%E5%9B%BE%E7%89%87%E9%83%BD%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E9%80%8F%E6%98%8E%E5%BA%A6%E5%8F%98%E5%8C%96%E9%87%8F%20%0D%0Athis.li%5Bi%5D.style.opacity%20%3D%20this.li%5Bi%5D.o%2F100%3B%20%2F%2F%E9%9D%9EIE%E7%94%A8opacity%E5%8D%B3%E5%8F%AF%20%0D%0Athis.li%5Bi%5D.style.filter%20%3D%20'alpha(opacity%3D'%2Bthis.li%5Bi%5D.o%2B')'%3B%20%2F%2FIE%E7%94%A8%E6%BB%A4%E9%95%9C%20%0D%0A%2F*%20%3D%3D%20%E7%BB%98%E5%88%B6%E6%8E%A7%E5%88%B6%E5%99%A8%20%3D%3D%20*%2F%20%0D%0Avar%20nav%20%3D%20document.createElement('a')%3B%20%2F%2F%E8%BF%99%E9%87%8C%E6%88%91%E5%B0%B1%E7%9B%B4%E6%8E%A5%E7%94%A8a%E6%A0%87%E7%AD%BE%E6%9D%A5%E5%81%9A%E6%8E%A7%E5%88%B6%E5%99%A8%EF%BC%8C%E8%80%83%E8%99%91%E8%AF%AD%E4%B9%89%E7%9A%84%E8%AF%9D%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%94%A8li%20%0D%0Anav.className%20%3D%20options.navClass%3Foptions.navClass%3A'fader-nav'%3B%20%2F%2F%E6%8E%A7%E5%88%B6%E5%99%A8class%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%B8%BA'fader-nav'%20%0D%0Anav.innerHTML%20%3D%20i%2B1%3B%20%0D%0Anav.onclick%20%3D%20new%20Function(this.anchor%2B'.pos('%2Bi%2B')')%3B%20%2F%2F%E7%BB%91%E5%AE%9Aonclick%E4%BA%8B%E4%BB%B6%EF%BC%8C%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E4%B9%8B%E5%89%8D%E5%86%99%E5%A5%BD%E7%9A%84pos()%E5%87%BD%E6%95%B0%20%0D%0Anav_wp.appendChild(nav)%3B%20%0D%0A%7D%20%0D%0Awp.appendChild(alt)%3B%20%2F%2F%20%0D%0Awp.appendChild(nav_wp)%3B%20%2F%2F%E6%8E%A7%E5%88%B6%E5%99%A8append%E5%88%B0%E9%A1%B5%E9%9D%A2%20%0D%0Athis.textH%20%3D%20nav_wp.offsetHeight%3B%20%0D%0Aalt.style.cssText%20%3D%20'height%3A'%2Bthis.textH%2B'px%3Bline-height%3A'%2Bthis.textH%2B'px%3Bcolor%3A%23fff%3Bfont-size%3A12px%3Bpadding-left%3A20px%3Bmargin%3A0%3Bposition%3Aabsolute%3Bleft%3A0%3Bbottom%3A0%3Boverflow%3Ahidden%3Bwidth%3A100%25%3Bbackground%3A%23000%3Bopacity%3A0.7%3Bfilter%3Aalpha(opacity%3D70)%3B'%3B%20%2F%2F%E4%B8%BA%E8%BF%99%E4%B8%AA%E5%B1%82%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F%20%0D%0Athis.pos(this.index)%3B%20%2F%2F%E5%8F%98%E6%8D%A2%E5%87%BD%E6%95%B0%20%0D%0A%7D%2C%20%0D%0Aauto%3Afunction()%7B%20%0D%0Athis.li.a%20%3D%20setInterval(new%20Function(this.anchor%2B'.move(1)')%2Cthis.a*1000)%3B%20%0D%0A%7D%2C%20%0D%0Amove%3Afunction(i)%7B%2F%2F%E5%8F%82%E6%95%B0i%E6%9C%89%E4%B8%A4%E7%A7%8D%E9%80%89%E6%8B%A9%EF%BC%8C1%E5%92%8C-1%2C1%E4%BB%A3%E8%A1%A8%E8%BF%90%E8%A1%8C%E5%88%B0%E4%B8%8B%E4%B8%80%E5%BC%A0%EF%BC%8C-1%E4%BB%A3%E8%A1%A8%E8%BF%90%E8%A1%8C%E5%88%B0%E4%B8%8A%E4%B8%80%E5%BC%A0%20%0D%0Avar%20n%20%3D%20this.cur%2Bi%3B%20%0D%0Avar%20m%20%3D%20i%3D%3D1%3Fn%3D%3Dthis.l%3F0%3An%3An%3C0%3Fthis.l-1%3An%3B%20%2F%2F%E4%B8%8B%E4%B8%80%E5%BC%A0%E6%88%96%E4%B8%8A%E4%B8%80%E5%BC%A0%E7%9A%84%E5%BA%8F%E5%8F%B7%EF%BC%88%E6%B3%A8%E6%84%8F%E4%B8%89%E5%85%83%E9%80%89%E6%8B%A9%E7%AC%A6%E7%9A%84%E8%BF%90%E7%94%A8%EF%BC%89%20%0D%0Athis.pos(m)%3B%20%2F%2F%E5%8F%98%E6%8D%A2%E5%88%B0%E4%B8%8A%E4%B8%80%E5%BC%A0%E6%88%96%E4%B8%8B%E4%B8%80%E5%BC%A0%20%0D%0A%7D%2C%20%0D%0Apos%3Afunction(i)%7B%20%0D%0AclearInterval(this.li.a)%3B%20%2F%2F%E6%B8%85%E9%99%A4%E8%87%AA%E5%8A%A8%E5%8F%98%E6%8D%A2%E8%AE%A1%E6%97%B6%E5%99%A8%20%0D%0AclearInterval(this.li%5Bi%5D.f)%3B%20%2F%2F%E6%B8%85%E9%99%A4%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA%E6%95%88%E6%9E%9C%E8%AE%A1%E6%97%B6%E5%99%A8%20%0D%0Athis.z%2B%2B%3B%20%0D%0Athis.li%5Bi%5D.style.zIndex%20%3D%20this.z%3B%20%2F%2F%E6%AF%8F%E6%AC%A1%E8%AE%A9%E4%B8%8B%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%89%87z-index%E5%8A%A0%E4%B8%80%20%0D%0Athis.alt.style.zIndex%20%3D%20this.z%2B1%3B%20%0D%0Anav_wp.style.zIndex%20%3D%20this.z%2B2%3B%20%0D%0Athis.cur%20%3D%20i%3B%20%2F%2F%E7%BB%91%E5%AE%9A%E5%BD%93%E5%89%8D%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E7%9A%84%E6%AD%A3%E7%A1%AE%E5%BA%8F%E5%8F%B7%20%0D%0Athis.li.a%20%3D%20false%3B%20%2F%2F%E5%81%9A%E4%B8%80%E4%B8%AA%E6%A0%87%E8%AE%B0%EF%BC%8C%E4%B8%8B%E9%9D%A2%E8%A6%81%E7%94%A8%E5%88%B0%EF%BC%8C%E8%A1%A8%E7%A4%BA%E6%B8%85%E9%99%A4%E8%AE%A1%E6%97%B6%E5%99%A8%E5%B7%B2%E7%BB%8F%E5%AE%8C%E6%88%90%20%0D%0A%2F%2Fthis.auto()%3B%20%2F%2F%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C%20%0D%0Aif(this.li%5Bi%5D.o%3E%3D100)%7B%20%2F%2F%E5%9C%A8%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E4%B9%8B%E5%89%8D%E5%85%88%E6%8A%8A%E5%9B%BE%E7%89%87%E9%80%8F%E6%98%8E%E5%BA%A6%E7%BD%AE%E4%B8%BA%E9%80%8F%E6%98%8E%20%0D%0Athis.li%5Bi%5D.o%20%3D%200%3B%20%0D%0Athis.li%5Bi%5D.style.opacity%20%3D%200%3B%20%0D%0Athis.li%5Bi%5D.style.filter%20%3D%20'alpha(opacity%3D0)'%3B%20%0D%0Athis.alt.style.height%20%3D%200%3B%20%2F%2F%E5%81%9A%E5%A4%87%E6%B3%A8%E5%B1%82%E7%9A%84%E6%BB%91%E5%8A%A8%E6%95%88%E6%9E%9C%20%0D%0A%7D%20%0D%0Athis.alt.innerHTML%20%3D%20this.img%5Bi%5D.alt%3B%20%2F%2F%E6%A4%8D%E5%85%A5alt%E6%96%87%E6%9C%AC%20%0D%0Afor(var%20x%3D0%3Bx%3Cthis.l%3Bx%2B%2B)%7B%20%0D%0Anav_wp.getElementsByTagName('a')%5Bx%5D.className%20%3D%20x%3D%3Di%3Fthis.curC%3A'fader-nav'%3B%20%2F%2F%E7%BB%91%E5%AE%9A%E5%BD%93%E5%89%8D%E6%8E%A7%E5%88%B6%E5%99%A8%E6%A0%B7%E5%BC%8F%20%0D%0A%7D%20%0D%0Athis.li%5Bi%5D.f%20%3D%20setInterval(new%20Function(this.anchor%2B'.fade('%2Bi%2B')')%2C20)%3B%20%0D%0A%7D%2C%20%0D%0Afade%3Afunction(i)%7B%20%0D%0Aif(this.li%5Bi%5D.o%3E%3D100)%7B%20%0D%0AclearInterval(this.li%5Bi%5D.f)%3B%20%2F%2F%E5%A6%82%E6%9E%9C%E9%80%8F%E6%98%8E%E5%BA%A6%E5%8F%98%E5%8C%96%E5%AE%8C%E6%AF%95%EF%BC%8C%E6%B8%85%E9%99%A4%E8%AE%A1%E6%97%B6%E5%99%A8%20%0D%0Aif(!this.li.a)%7B%20%2F%2F%E7%A1%AE%E4%BF%9D%E6%89%80%E6%9C%89%E8%AE%A1%E6%97%B6%E5%99%A8%E9%83%BD%E6%B8%85%E9%99%A4%E6%8E%89%E4%B9%8B%E5%90%8E%E5%86%8D%E5%BC%80%E5%A7%8B%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C%E3%80%82%E8%A6%81%E4%B8%8D%E7%84%B6%E4%BC%9A%E5%AF%BC%E8%87%B4%E6%9C%89%E6%8E%A7%E5%88%B6%E5%99%A8%E6%97%B6%E7%82%B9%E5%87%BB%E8%BF%87%E5%BF%AB%E7%9A%84%E8%AF%9D%EF%BC%8C%E8%AE%A1%E6%97%B6%E5%99%A8%E6%B2%A1%E6%9D%A5%E5%BE%97%E5%8F%8A%E6%B8%85%E9%99%A4%E5%B0%B1%E5%BC%80%E5%A7%8B%E4%B8%8B%E4%B8%80%E6%AC%A1%E5%8F%98%E5%8C%96%EF%BC%8C%E5%8A%9F%E8%83%BD%E5%B0%B1%E4%B9%B1%E4%BA%86%20%0D%0Athis.auto()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Athis.li%5Bi%5D.o%2B%3D5%3B%20%0D%0Athis.li%5Bi%5D.style.opacity%20%3D%20this.li%5Bi%5D.o%2F100%3B%20%0D%0Athis.li%5Bi%5D.style.filter%20%3D%20'alpha(opacity%3D'%2Bthis.li%5Bi%5D.o%2B')'%3B%20%0D%0Athis.alt.style.height%20%3D%20Math.ceil(this.li%5Bi%5D.o*this.textH%2F100)%2B'px'%3B%20%2F%2F%E5%81%9A%E6%96%87%E5%AD%97%E6%BB%91%E5%8A%A8%E6%95%88%E6%9E%9C%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20%7Binit%3Ainit%7D%20%0D%0A%7D()%3B%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="fader"> 
<ul> 
<li><img src="http://files.glzy8.com/upload/201010/20101011221558299.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101011221558299.jpg" _mce_src="http://files.glzy8.com/upload/201010/20101011221558299.jpg" alt="我是图片一" /></li> 
<li><img src="http://files.glzy8.com/upload/201010/20101011221558112.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101011221558112.jpg" _mce_src="http://files.glzy8.com/upload/201010/20101011221558112.jpg" alt="哈哈，图片二" /></li> 
<li><img src="http://files.glzy8.com/upload/201010/20101011221558758.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101011221558758.jpg" _mce_src="http://files.glzy8.com/upload/201010/20101011221558758.jpg" alt="这是图片三" /></li> 
<li><img src="http://files.glzy8.com/upload/201010/20101011221558158.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101011221558158.jpg" _mce_src="http://files.glzy8.com/upload/201010/20101011221558158.jpg" alt="哈哈，图片四" /></li> 
<li><img src="http://files.glzy8.com/upload/201010/20101011221558834.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F201010%2F20101011221558834.jpg" _mce_src="http://files.glzy8.com/upload/201010/20101011221558834.jpg" alt="图片五来咯" /></li> 
</ul> 
</div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Avar%20fader%20%3D%20new%20Hongru.fader.init('fader'%2C%7B%20%0D%0Aid%3A'fader'%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　恩，文章最后，差点忘了说一个很关键的点，就是options的配置参数：

　　在实例化 new Hongru.fader.init()的时候，第二个参数即为配置参数，是个对象，可选配置参数如下

　　{

　　id: //(必选)，轮播列表父元素id

　　auto: //(可选)自动播放时间间隔秒数

　　navClass: //(可选) 控制器className

　　curNavClass: //(可选) 控制器当前状态className

　　index: //(可选)初始化时从第几个位置开始播放，默认为0,即第一个元素

　　}

　　好了，这一系列到此结束！！源码大家可以自行更改

教程首页更多教程