<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; } .box2{ width: 300px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; } .case1{ width: 900px; height: 300px; position: relative; left: 0; } .case2:nth-of-type(1){ width: 300px; height: 300px; background: red; float: left; } .case2:nth-of-type(2){ width: 300px; height: 300px; background: blue; float: left; } .case2:nth-of-type(3){ width: 300px; height: 300px; background: pink; float: left; } .ul{ position: absolute; bottom: 10px; left: 50px; list-style: none; } .ul li{ width: 30px; height: 30px; background: yellow; border-radius: 50%; float: left; text-align: center; line-height: 30px; margin-left: 10px; cursor: pointer; } </style> </head> <body> <div class="box"> <div class="case1"> <div class="case2"></div> <div class="case2"></div> <div class="case2"></div> </div> <ul class="ul"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script> class tab{ constructor(case1,case2,ul,li){ this.case1=document.getElementsByClassName(case1)[0]; this.ul=document.getElementsByClassName(ul)[0]; this.case2=this.case1.getElementsByClassName(case2); this.li=this.ul.getElementsByTagName(li); this.init(); } init(){ this.num=0; this.fun=()=> { this.num++; if(this.num>(this.li.length-1)){ this.num=0 } this.case1.style.transition = 1 + "s"; this.case1.style.left = -this.num * 300 + "px"; }; this.time1=setInterval(this.fun,2000); this.case1.οnmοuseοver=()=>{ clearInterval(this.time1) }; this.case1.οnmοuseοut=()=>{ this.time1=setInterval(this.fun,2000); }; for(let i=0;i<this.li.length;i++) { this.li[i].οnclick=()=> { this.case1.style.transition = 1 + "s"; this.case1.style.left = -i * 300 + "px"; this.num=i; } } } } new tab("case1","case2","ul","li") </script> </body> </html>
面向对象table切换
最新推荐文章于 2020-08-26 10:54:31 发布