vue实现上下切换自动轮播 移入移出暂停轮播

<template>
  <div class="about">
    <div style="display:flex;">
      <div class="left">
        <div class="box1">
          <div class="box2" :style="{ backgroundColor: bgC }"  @mouseover="yiru(imgIndex)" @mouseleave="yichu">{{imslist[imgIndex].url }}</div>
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in imslist" style="height:50px;width:200px;" :key="index" @mouseover="yiru(index)"
          @mouseleave="yichu">
          <div :class="index == imgIndex?'newstyle':'oldstyle'">{{ item.url}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'AvoutView',
  data() {
    return {
      imslist: [
        { url: '111', },
        { url: '222', },
        { url: '333', },
        { url: '444', },
      ],
      imgIndex: 0,
      bgC: '#000',
    }
  },
  mounted() {
    this.getMove()
  },
  methods: {

    getMove() {
       let timer= setInterval(() => {
          if(this.imgIndex<3){
            this.imgIndex++
          }else{
            clearInterval(timer)
            setTimeout(()=>{
              this.imgIndex=0
              this.getMove()
            },100)
          }
        }, 1000)
    },

    yiru(index) {
      this.imgIndex = index
      let endTime = setInterval(function () { }, 10000);
      for (let i = 1; i <= endTime; i++) {
        clearInterval(i)
      }
    },
    
    yichu() {
      this.getMove()
    }

  }

}
</script>

<style lang="less">
.box1 {
  height: 200px;
  width: 200px;
  color: #fff;
}

.box2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.newstyle{

  border: 1px solid blue;
  background-color: #ccc;

}


</style>