k2网页html,xxk2.html

*{margin: 0;padding: 0;list-style: none;}

.tab{width: 300px;height: 300px;margin: 100px auto;border: 1px solid black;overflow: hidden;}

input{width: 100px;height: 50px;line-height: 30px;text-align: center;float: left;}

ul li{width: 300px;height: 250px;text-align:center;line-height:200px;display: none;}

.active{background: yellow;}

.show{display: block;}

next

• 1
• 2
• 3

class tap{

constructor(){

this.aBtn=document.querySelectorAll('input');

this.aLi=document.querySelectorAll('ul li');

this.show();

}

show(){

var _this=this;

for (let i=0;i

this.aBtn[i].οnclick=function(){

_this.tab(i)

}

}

}

tab(i){

for (var j =0;j

this.aLi[j].className='';

this.aBtn[j].className='';

}

this.aLi[i].className='show';

this.aBtn[i].className='active';

}

}

class autoplay extends tap{

constructor(obj){

super(obj)

this.index=0;

}

auto(){

var _this=this;

console.log(this)

setInterval(function(){

_this.index++;

if(_this.index==_this.aBtn.length){

_this.index=0;

}

_this.tab(_this.index);

},2000)

}

}

new autoplay('#tap').auto();

一键复制

编辑

Web IDE

原始数据

按行查看

历史