面向对象—轮播图

来源：互联网发布：网络平台销售协议编辑：程序博客网时间：2024/06/01 22:05

大家有木有觉得用面向对象方式写代码。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 >

</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].onclick=function(){

_this.but(this);

}

//下一张

this.nex.onclick=function(){

_this.nexts(this);

}

//上一张

this.page.onclick=function(){

_this.pages(this);

}

//移入事件

content.onmouseover=function(){

_this.seover();

}

//移出事件

content.onmouseout=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的改为构造函数

不能有嵌套函数，可以有全局变量；

把全局变量改为属性，把函数改为方法。

0 0