面向对象table切换

<!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.onmouseover=()=>{
                   clearInterval(this.time1)
               };
               this.case1.onmouseout=()=>{
                   this.time1=setInterval(this.fun,2000);
               };
               for(let i=0;i<this.li.length;i++) {
               this.li[i].onclick=()=>
               {
                   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切换

猜你喜欢
