面向对象--控制多个选项卡自动播放

来源:互联网 发布:手机淘宝怎么上架商品 编辑:程序博客网 时间:2024/05/18 14:27

感受一些面向对象的好处:灵活

<script>window.onload = function(){    var t1 = new Tab('div1');    t1.init();    t1.autoPlay();    var t2 = new Tab('div2');    t2.init();    t2.autoPlay();};function Tab(id){    this.oParent = document.getElementById(id);    this.aInput = this.oParent.getElementsByTagName('input');    this.aDiv = this.oParent.getElementsByTagName('div');    this.iNow = 0;}Tab.prototype.init = function(){    var This = this;    for(var i=0;i<this.aInput.length;i++){        this.aInput[i].index = i;        this.aInput[i].onclick = function(){            This.change(this);        };    }};Tab.prototype.change = function(obj){    for(var i=0;i<this.aInput.length;i++){        this.aInput[i].className = '';        this.aDiv[i].style.display = 'none';    }    obj.className = 'active';    this.aDiv[obj.index].style.display = 'block';};Tab.prototype.autoPlay = function(){    var This = this;    setInterval(function(){         if(This.iNow == This.aInput.length-1){            This.iNow = 0;        }        else{            This.iNow++;        }           for(var i=0;i<This.aInput.length;i++){            This.aInput[i].className = '';            This.aDiv[i].style.display = 'none';        }        This.aInput[This.iNow].className = 'active';        This.aDiv[This.iNow].style.display = 'block';           },2000);    };</script>