vue原生轮播图

<template>
  <div id="mask">
    <!-- 鼠标经过时自动播放图片 -->
    <img :src="imgArr[index]" @mouseover="stop" @mouseout="change">
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgArr: [
        require("@/assets/img/information/dpc/nav-b-active.png"),
        require("@/assets/img/information/dpc/nav-t-active.png"),
        require("@/assets/img/information/dpc/nav-t.png"),
        require("@/assets/img/information/dpc/nav-b-active.png"),
      ],
      index: 0,
      timer: null
    }
  },
  mounted () {
    this.change()
  },
  methods: {
    next: function () {
      this.index++;
      if (this.index === 4) {
        this.index = 0
      }
    },
    change: function () {
      this.timer = setInterval(this.next, 500);
    },
    stop: function () {
      clearInterval(this.timer)
    }
  },
}
</script>

<style>
#mask {
  margin: 0px auto;
  width: 50px; /*盒子宽度和高度跟图片一致 */
  height: 38px;
}
.left,
.right {
  width: 50px;
  height: 50px;
}
.left {
  position: relative;
  top: -250px;
}
.right {
  position: relative;
  top: -250px;
  left: 300px;
  float: left;
}
</style>