JS学习进程（三）

使用面向对象编写图片轮播  O(∩_∩)O

function Banner(wrap,picImg,picLis,btnDivs){
this.wrap=wrap;
this.list=picImg;
this.picLis=picLis;
this.btnDivs=btnDivs;
this.index=0;
this.timer=null;
this.length=this.picLis.length;
this.init();
};
//初始化
Banner.prototype.init=function(){
var This=this;
this.list[0].style.display='block';
this.picLis[0].className="on";
for(var i=0;i<this.length;i++){
this.picLis[i].index=i;
this.picLis[i].onclick=function(){
This.list[This.index].style.display="none";
This.picLis[This.index].className="";
This.index=this.index;
This.list[This.index].style.display="block";
this.className="on";
};
};
for(var i=0;i<this.btnDivs.length;i++){
this.btnDivs[i].index=i;
this.btnDivs[i].onclick=function(){
This.list[This.index].style.display="none";
This.picLis[This.index].className="";
if(this.index){
This.index ++;
This.index %= This.length;
}else{
This.index --;
if(This.index<0){
This.index=This.length-1;
}
};
This.list[This.index].style.display="block";
This.picLis[This.index].className="on";
}
};
this.auto();
this.clear();
}


Banner.prototype.auto=function(){
var This=this;
this.timer=setInterval(function(){
This.list[This.index].style.display="none";
This.picLis[This.index].className="";
This.index ++;
This.index %=This.length;
This.list[This.index].style.display="block";
This.picLis[This.index].className="on";
},5000);
}


Banner.prototype.clear=function(){
var This=this;
this.wrap.onmouseenter=function(){
clearInterval(This.timer);
};
this.wrap.onmouseleave=function(){
This.auto();
}
}

//实例化
var picBanner=document.getElementById("pic-banner");
var picImg=document.getElementById("pic").getElementsByTagName("img");
var picLis=document.getElementById("tab").getElementsByTagName("li");
var btnDivs=document.getElementById("pic-btn").getElementsByTagName("div");

var bann =new Banner(picBanner,picImg,picLis,btnDivs);

OK~逼格又提升一步