简记：轮播(vue)

html

<div class="carousel_box ">
      <ul class="carousel" :class="{transition:hadTrans1}">
        <li>11</li>
        <li>22</li>
        <li>11</li>
      </ul>
    </div>
    <p class="p" @click="Jump(0)">一个</p>
    <p class="p" @click="Jump(1)">二个</p>

css

.p{
    font-size: 30px;
    cursor: pointer;
  }
  .transition{
    transition: all .5s linear;
  }
  .carousel_box{
    overflow: hidden;
    position: relative;
     20.8vw;
    height: 100px;
    .carousel{
      position: absolute;
      left:0;
      top:0;
      display: flex;
      flex-wrap: nowrap;
      li{
        font-size: 30px;
        display: inline-block;
         20.8vw;
        height: 100px;
      }
    }
    
  }

js

      timer1:null,
      hadTrans1:true,

initTimer(){
      let i=0,len=2,left=0;
      this.timer1=setInterval(()=>{
        if(i==0) this.hadTrans1=true;
        i++;
        left=-20.8*i;
        if(i>=len+1){
          this.hadTrans1=false;
          left=0;
          i=0;
        }
        document.querySelector(".carousel").style.cssText=`left:${left}vw`;
      },3000);
    },
    Jump(i){
      console.log('跳转',i);
      clearInterval(this.timer1)
      let len=2,left=0;
      this.hadTrans1=false;
      left=-20.8*i;
      document.querySelector(".carousel").style.cssText=`left:${left}vw`;
      setTimeout(()=>{this.hadTrans1=true;},0);
      this.timer1=setInterval(()=>{
        if(i==0) this.hadTrans1=true;
        i++;
        left=-20.8*i;
        if(i>=len+1){
          this.hadTrans1=false;
          left=0;
          i=0;
        }
        document.querySelector(".carousel").style.cssText=`left:${left}vw`;
      },3000);
    },