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

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