面向对象—轮播图
大家有木有觉得用面向对象方式写代码。this满天飞，搞得晕头转向的。哈哈！
多练多写才能更好的领悟
css样式：
HTML结构：
javascrpt:
funtion Carousel(id){
var _this=this;
var content=document.getElementById(id);
this.page=content.getElementsByTagName('a')[0];
this.next=content.getElementsByTagName('a')[1];
this.imgs=content.getElenemtsByTagName('img')[0];
this.ps = content.getElementsByTagName('p');
this.buts=content.getElementsByTagName('input');
this.timer=null;
this.txts=['第一张','第二张','第三张','第四张','第五张','第六张']；
this.arr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
this.index=0;
this.len=this.arr.lenght;
this.buts[this.index].className='color';
//焦点按钮点击事件
for(var i=0;i
this.buts[i].index=i;
this.buts[i].οnclick=function(){
_this.but(this);
}
}
//下一张
this.nex.οnclick=function(){
_this.nexts(this);
}
//上一张
this.page.οnclick=function(){
_this.pages(this);
}
//移入事件
content.οnmοuseοver=function(){
_this.seover();
}
//移出事件
content.οnmοuseοut=function(){
_this.seout();
}
}
//初始化
Carousel.prototype.mosss=function(){
this.imgs.src=this.arr[this.insex];
this.ps[0].innerHTML=[this.index+1]+'/'+this.len;
this.ps[1].innerHTML=this.txts[this.index];
}
//焦点按钮(注意改变this指向，这里面的this指的是类而不是按钮)
Carousel.prototype.but=function(t){
for(var i=0;i
this.buts[i].className='';
}
t.className='color';
this.imgs.src=this.arr[t.index];
this.ps[0].innerHTML=[t.index+1]+'/'+this.len;
this.ps[1].innerHTML=this.txts[t.index];
}
//下一张
Carousel.prototype.nexts=function(){
var _this=this;
this.index++;
if(this.index==this.len){
this.index=0;
}
_this.mosss();
for(var i=0;i
this.buts[i].className='';
}
this.buts[this.index].className='color';
}
//上一张
Carousel.prototype.pages=function(){
var _this=this;
this.index--;
if(this.index==-1){
this.index=this.len-1;
}
_this.mosss();
for(var i=0;i
this.buts[i].className='';
}
this.buts[this.index].className='color';
}
//定时器(注意this指向，定时器里面的this指的是Window，原先的那个this指的是类)
Carousel.prototype.autoplay=function(){
var _this=this;
_this.timer=setInterval(function(){
for(var i=0;i<_this.len;i++){
_this.buts[i].className='';
}
if(_this.index==_this.len){
_this.index=0;
}
_this.mosss();
_this.buts[_this.index].className='color';
_this.index+1;
},1000)
}
//清除定时器
Carousel.prototype.seover=function(){
clearInterval(this.timer);
}
//打开定时器
Carousel.prototype.seout=function(){
this.autoplay();
}
//初始化调用
var obj=new Carousel('box')
obj.mosss();
obj.autoplay();
总结：
把onload的改为构造函数
不能有嵌套函数，可以有全局变量；
把全局变量改为属性，把函数改为方法。