vue实现轮播图

<-------------------------html-------------------------------->
<div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
    <div class="slideshow">
        <transition-group tag="ul" name="image">
            <li v-for="(imgs, index) in imgArray" v-show="index===mark" :key="imgs">
                <a href="#">
                    <img :src="imgs" />
                </a>
            </li>
        </transition-group>
    </div>
    <div class="bar">
  <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"
  @click="change(index)" :key="index"></span>
    </div>
</div>

<-------------方法--------------------->

export default { data() { return { timer: null, //定时器 mark: 0, //比对图片索引的变量 imgArray: [ //图片路径 require('../../assets/img/banners/bannerA.jpg'), require('../../assets/img/banners/bannerB.png'), require('../../assets/img/banners/bannerC.png'), require('../../assets/img/banners/bannerD.png'), ], } },

methods: {
    autoPlay() {
        this.mark++
        if (this.mark === 4) {
            this.mark = 0
        }
    },
    play() {
        this.timer = setInterval(this.autoPlay, 5000)
    },
    change(i) {
        this.mark = i
    },
    stop() {
        clearInterval(this.timer)
    },
    move() {
        this.timer = setInterval(this.autoPlay, 5000)
    },
},
created() {
    this.play()
},
<-------------样式--------------------->

• { margin: 0; padding: 0; list-style: none; } .slide { width: 100%; height: 500px; margin: 0 auto; overflow: hidden; position: relative; } .slideshow { width: 100%; height: 500px; } .slideshow ul { width: 100%; height: 500px; } li { width: 100%; position: absolute; } .slideshow ul a { display: inline-block; width: 100%; } img { width: 100%; height: 500px; } .bar { position: absolute; width: 100%; bottom: 10px; margin: 0 auto; z-index: 10; text-align: center; } .bar span { width: 10px; height: 10px; border-radius: 50%; background: white; display: inline-block; margin-right: 10px; } .active { background: red !important; } .image-enter-active { transform: translateX(0); transition: all 1.5s ease; } .image-leave-active { transform: translateX(-100%); transition: all 1.5s ease; } .image-enter { transform: translateX(100%); } .image-leave { transform: translateX(0); }