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

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

<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>