|
大家有木有觉得用面向对象方式写代码。this满天飞，搞得晕头转向的。哈哈！
多练多写才能更好的领悟
css样式：
<style>
#box{width:450px;height:270px;background:#ccc;position:relative;}
#box a{width:60px;height:30px; line-height:30px;text-align:center;display:block;position:absolute;background:red;font-size:30px;font-weight:bold;color:#fff;z-index:1;text-decoraion:none;margin-top:-30px;}
#box p{margin:0; width:100%; height:30px; background:#ccc;position:absolute;text-aligin:center;line-height:30px;opacity:0.3;}
.page{left:0;top:50%;}
.next{right:0;top:50%;}
.txts_top{left:0;top:0;}
.txts_botm{left:0;bottom:0;}
input{width:30px;height:30px;border-radius:50%;border:none;outline:none;opactity:0.8;}
.tab{height:50px;position:absolute;bottom:20px;left:27%;}
.color{background-color:red;}
</style>
HTML结构：
<div >
<a href="javascript:;" class="page"><</a>
<a href="javascript:;" class="next">></a>
<img src=""/>
<p class="txts_top"></P>
<p class="txts_botm"></p>
<div class="tab">
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
</div>
</div>
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.len;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.len;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.len;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.len;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的改为构造函数
不能有嵌套函数，可以有全局变量；
把全局变量改为属性，把函数改为方法。
| 
转播
