时间：2021-07-01 10:21:17 帮助过：20人阅读
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
this.pos(this.index); //变换函数
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
this.pos(m); //变换到上一张或下一张
},
pos:function(i){
this.auto(); //自动运行
}
}
}();
以上只是我个人的编码习惯：把功能块都写在一个闭包里，减少命名冲突，避免全局变量污染。（但是这样会有个问题，所有函数都在闭包里，很可能会导致ie内存泄露，所以还有另外种更好的方式：只把初始化函数写入闭包，其他功能通过原型内建。这样同样可以避免命名冲突和全局变量污染，又同时减轻了内存压力。这个优化方案将在下一部分一起说明）
好了，大的框架出来了，我们其实就成功了一半了，以下再根据每个模块具体的功能充实函数。由于dom选择器使我们最常使用的功能，所以这里预先定义了两个全局函数
代码如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每个模块函数的拆解：
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变量
this.pos(this.index); //变换函数
},
auto：
代码如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
代码如下:
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：
代码如下:
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}
好了，总的源码是这样的：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
恩，这一部分到此结束吧，下一部分将增加淡入淡出效果和刚才提到了尽量规避闭包引起的内存泄露的优化方案！