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

　　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); //变换函数

　　},

　　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最大的那个还大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);

　　},

.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;}