vue 实现 简易轮播图

需求：
图片每隔一段时间自动进行切换
点击前进按钮，会切换下一张图片；点击后退按钮，会切换到前一张图片
鼠标悬停到分分页器（小圆点）时，会切换到对应的图片

Html 部分：

 <div id="app">
        <div class="container">
            <div class="arrow arrowLeft" @click="prev">&lt;</div>
            <div class="arrow arrowRight"  @click="next">&gt;</div>
            <ul class="list">
                <li v-for="(item,i) in imglists" v-show="i===index">
                    <img :src="item" style="width: 500px;height: 300px;">
                </li>
            </ul>
            <ul class="indexs">
                <li v-for="(item,i) in imglists" @mouseenter="change(i)" :class="{active:i===index}"></li>
            </ul>
        </div>
 </div>

css 样式：

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

        .container {
            width: 500px;
            height: 300px;
            position: relative;
            margin: 0 auto;
        }

        .container ul.list li {
            width: 500px;
            height: 300px;
        }

        .container ul.indexs {
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            display: flex;
        }

        .container ul.indexs li {
            width: 10px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
            margin: 0 5px;
        }

        .container ul.indexs li.active {
            background-color: #fff;
        }

        div.arrow{
            width: 30px;
            height: 30px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        div.arrow.arrowLeft{
            left: -30px;
        }

        div.arrow.arrowRight{
            right: -30px;
        }

js 部分：

new Vue({
     el: '#app',
     data() {
     	return {
              index: 0,
              timer: -1,
              imglists: ['https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1141259048,554497535&fm=26&gp=0.jpg',
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
                        'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
                        'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg']
          }
     },
     mounted() {
          this.run()
     },
     methods: {
          run() {
               this.timer = setInterval(() => {
               this.index++
                if (this.index === this.imglists.length) this.index = 0
              }, 3000);
          },
          change(i){
              clearInterval(this.timer)
              this.index = i
               this.run()
          },
          prev(){
               clearInterval(this.timer)
               this.index--
               if (this.index < 0) this.index = this.imglists.length - 1
               this.run()
          },
          next(){
              clearInterval(this.timer)
              this.index++
              if (this.index === this.imglists.length) this.index = 0
              this.run()
          }
     },
 })