面向对象—轮播图

大家有木有觉得用面向对象方式写代码。this满天飞，搞得晕头转向的。哈哈！

多练多写才能更好的领悟

css样式：

<style>

#box{450px;height:270px;background:#ccc;position:relative;}

#box  a{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; 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{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 id="box">

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

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

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