vue原生轮播

今天早晨突发奇想要用vue写一个原生的轮播
然后就出现了一个究极逗比轮播

<template>
  <div class="swiperpage">
    <button @click="start">下一页</button>
    <div class="imgBox">
      <img
        v-for="(item,index) in imgInfo"
        :key="index"
        :src="item.path"
        class="swiperImg"
        :alt="'图片'+index"
      />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {
      imgInfo: [
        {
          id: 1,
          path: require("@/assets/image/1.jpg")
        },
        {
          id: 2,
          path: require("@/assets/image/2.jpg")
        },
        {
          id: 3,
          path: require("@/assets/image/3.jpg")
        },
        {
          id: 4,
          path: require("@/assets/image/4.jpg")
        },
        {
          id: 5,
          path: require("@/assets/image/5.jpg")
        },
        {
          id: 6,
          path: require("@/assets/image/6.jpg")
        },
        {
          id: 8,
          path: require("@/assets/image/7.jpg")
        }
      ],
      nowImg: 0,
      speed: 1000,
      readObj: {}
    };
  },

  methods: {
    start() {
      var that = this;
      that.readObj = that.imgInfo[0];
      that.imgInfo.shift();
      that.imgInfo.push(that.readObj);
    }
  }
};
</script>

<style  scoped>
.imgBox {
  position: relative;
}
.swiperImg {
  position: absolute;
  transform: all 2s infinite;
}

.swiperImg:nth-of-type(1) {
  top: 60px;
  left: 0;
  z-index: 1;
  opacity: 0;
  width: 400px;
  height: 240px;
}
.swiperImg:nth-of-type(2) {
  top: 60px;
  left: 0;
  z-index: 2;
  opacity: 0.4;
  width: 400px;
  height: 240px;
}
.swiperImg:nth-of-type(3) {
  top: 30px;
  left: 150px;
  z-index: 3;
  opacity: 0.7;
  width: 500px;
  height: 300px;
}
.swiperImg:nth-of-type(4) {
  top: 0;
  left: 300px;
  z-index: 4;
  opacity: 1;
  width: 600px;
  height: 360px;
}
.swiperImg:nth-of-type(5) {
  top: 30px;
  left: 550px;
  z-index: 3;
  opacity: 0.7;
  width: 500px;
  height: 300px;
}
.swiperImg:nth-of-type(6) {
  top: 60px;
  left: 800px;
  z-index: 2;
  opacity: 0.4;
  width: 400px;
  height: 240px;
}
.swiperImg:nth-of-type(7) {
  top: 60px;
  left: 800px;
  z-index: 1;
  opacity: 0;
  width: 400px;
  height: 240px;
}
</style>

swiper真香啊