发布于 2017-07-23 21:47:32 | 164 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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(); //自动运行
}
}
}();
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
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:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
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:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}