面向对象轮播图

function Init(){
this.olist = document.getElementsByClassName("list")[0];
this.ali = this.olist.getElementsByTagName("li");
this.lw = this.ali[0].offsetWidth;
this.btn = document.getElementsByClassName("btn")[0].getElementsByTagName("a");
this.dot = document.getElementsByClassName("dot")[0].getElementsByTagName("a");
this.ban = document.getElementsByClassName("banner")[0];
this.btn1=document.getElementsByClassName("btn")[0];
this.now = 0;
this.timer = null;
var _this=this;
this.olist.style.width=this.lw*this.ali.length+'px';


//轮播的停止和播放
this.ban.onmouseover=function(){
clearInterval(_this.timer);
_this.btn1.style.display = "block";
}
this.ban.onmouseout=function(){
_this.play();
_this.btn1.style.display = "none";
}
//左右切换
this.btn[0].onclick=function(){
if(_this.now==0){
_this.now=_this.ali.length-2;
_this.olist.style.left=-_this.lw*(_this.ali.length-1)+'px'
}else{
_this.now--;
}
_this.toimg()
}
this.btn[1].onclick=function(){
if(_this.now==_this.ali.length-1){
_this.now=1;
_this.olist.style.left=0;
}else{
_this.now++;
}
_this.toimg()
}
//点击圆点切换
for(var i=0;i<this.dot.length;i++){
this.dot[i].index = i;
this.dot[i].onclick=function(){
_this.click(this);
}
}
}
Init.prototype.click = function(that){
for(var j=0;j<this.dot.length;j++){
this.dot[j].className = '';
}
that.className = "active";
move(this.olist,{"left":-that.index*this.lw})
this.now=that.index;
}
//轮播原理
Init.prototype.toimg = function(){
move(this.olist,{"left":this.lw*-this.now});
for(var i=0;i<this.dot.length;i++){
this.dot[i].className='';
}
this.dot[this.now==this.ali.length-1?0:this.now].className="active";
}
//自动轮播
Init.prototype.play = function(){
var _this=this;
this.timer=setInterval(function(){
if(_this.now==_this.ali.length-1){
_this.now=1;
_this.olist.style.left=0;
}else{
_this.now++;
}
_this.toimg()
},2000)
}
new Init().play();