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]
}
}
有疑问的小伙伴可以向我提问,我会的尽量给大家答复,希望大家一起进步,下次我会写一些更好的代码给大家