javascript面向对象tab切换

1.话不多说，先把html代码贴上

<div id="tab">
        <div class="tab-list">
            <div class="list tab-active">111</div>
            <div class="list">222</div>
            <div class="list">333</div>
        </div>
        <div class="tab-main">
            1111
        </div>
        <div class="tab-main">
            2222
        </div>
        <div class="tab-main">
            3333
        </div>
    </div>

2.接下来在构造函数里面添上我们需要实现的功能

function gyqTab() {
    this.seet = {
        autoplay: '',//定时翻页
        move: false,//hover效果
        dow: function(T) {},//鼠标按下回调
    }
}

3.好了，这边暂时就写了这些功能，需要添加别的功能的小伙伴可以评论区找我帮你写，现在是写初始化代码

gyqTab.prototype.init = function(obj) {
     this.Tab = document.getElementById(obj.id)
    this.list = this.Tab.getElementsByClassName('list');
    this.tabMain = this.Tab.getElementsByClassName('tab-main');
    this.num=0;
    this.time=null;
    extend(this.seet,obj)//对象的继承
    this.tabMain[0].style.display='block'
    var This = this
    for (let i = 0; i < this.list.length; i++) {
        this.list[i].index= i;
        this.list[i].onclick = function() {//点击
            This.change(this)
        }
        if (this.seet.move) {
            this.list[i].onmouseover=function(){//hover效果
            This.change(this)
        }
        }
    }
    if (this.seet.autoplay != '') {
        this.time=setInterval(function() {//定时翻页
            This.auto()
        }, this.seet.autoplay)

       this.Tab.onmouseover=function(){//关闭定时器
            This.setOut()
      }
        this.Tab.onmouseout=function(){//重新开启定时器
            This.time=setInterval(function() {
                This.auto()
            }, This.seet.autoplay)
        }
    }
}

4.下面是点击事件和hover事件里面的代码

gyqTab.prototype.change = function(T) {
    for (let i = 0; i < this.list.length; i++) {
        this.list[i].className = 'list';
        this.tabMain[i].style.display = 'none';
    }
    this.num=T.index;
    T.className = 'tab-active list';
    this.tabMain[this.num].style.display = 'block';
    this.seet.dow(this)//鼠标按下回调
}

5.接下来是定时器代码

gyqTab.prototype.auto = function() {
    this.num++
    if (this.num>=this.list.length) {
        this.num=0;
    }

   for (let i = 0; i < this.list.length; i++) {
    this.list[i].className='list';
    this.tabMain[i].style.display = 'none'
   }
   this.list[this.num].className='list tab-active';
   this.tabMain[this.num].style.display = 'block';
   this.seet.dow(this)//鼠标按下回调
}

6.鼠标以上dom关闭定时器

gyqTab.prototype.setOut=function(){
    clearInterval(this.time)
}

7.最重要的对象继承的方法也贴上，目前都是用的这个会面向对象的小伙伴要是可以帮我改进下最好了，这只是一个简单的方法，调用在init里面调用我有注释

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr]=obj2[attr]
    }
}

8.这样一个简单的面向对象的tab切换代码就已经实现了，然后在页面上调用就可以直接实现功能了

window.onload = function() {
    var Tab = new gyqTab();
    Tab.init({
        id: 'tab',
        autoplay:2000
    })
}

9.现在贴上全部代码方面大家复制

function gyqTab() {
    this.seet = {
        autoplay: '',//定时翻页
        move: false,//hover效果
        dow: function(T) {},//鼠标按下回调
    }
}
gyqTab.prototype.init = function(obj) {
    this.Tab = document.getElementById(obj.id)
    this.list = this.Tab.getElementsByClassName('list');
    this.tabMain = this.Tab.getElementsByClassName('tab-main');
    this.num=0;
    this.time=null;
    extend(this.seet,obj)
    this.tabMain[0].style.display='block'
    var This = this
    for (let i = 0; i < this.list.length; i++) {
        this.list[i].index= i;
        this.list[i].onclick = function() {
            This.change(this)
        }
        if (this.seet.move) {
            this.list[i].onmouseover=function(){
            This.change(this)
        }
        }
    }
    if (this.seet.autoplay != '') {
        this.time=setInterval(function() {
            This.auto()
        }, this.seet.autoplay)

       this.Tab.onmouseover=function(){
            This.setOut()
      }
        this.Tab.onmouseout=function(){
            This.time=setInterval(function() {
                This.auto()
            }, This.seet.autoplay)
        }
    }

}

gyqTab.prototype.change = function(T) {
    for (let i = 0; i < this.list.length; i++) {
        this.list[i].className = 'list';
        this.tabMain[i].style.display = 'none';
    }
    this.num=T.index;
    T.className = 'tab-active list';
    this.tabMain[this.num].style.display = 'block';
    this.seet.dow(this)
}
gyqTab.prototype.auto = function() {
    this.num++
    if (this.num>=this.list.length) {
        this.num=0;
    }

   for (let i = 0; i < this.list.length; i++) {
    this.list[i].className='list';
    this.tabMain[i].style.display = 'none'
   }
   this.list[this.num].className='list tab-active';
   this.tabMain[this.num].style.display = 'block';
   this.seet.dow(this)
}
gyqTab.prototype.setOut=function(){
    clearInterval(this.time)
}
function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr]=obj2[attr]
    }
}

有疑问的小伙伴可以向我提问，我会的尽量给大家答复，希望大家一起进步，下次我会写一些更好的代码给大家