vue原生实现动态自动轮播

Talk is cheap, Show me the code.
封装一个组件

<template>
  <div class="swiperBox">
    <div class="directionIcon">
      <div
        class="imgLeft"
        @click="clickLeft"/>
      <div
        class="imgRight"
        @click="clickRight"/>
    </div>
    <div id="swiper">
      <div class="imgBox">
        <div
          v-for="(item,index) of imgList"
          :key="index"
          class="imgDiv">
          <img :src="item" />
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: 'BaseSwiper',
  props: {
    speed: {
      type: Number,
      default: 2
    },
    direction: {
      type: String,
      default: 'left'
    }
  },
  data () {
    return {
      imgList: [
        require('@/assets/images/panel3/1.png'),
        require('@/assets/images/panel3/1.png'),
        require('@/assets/images/panel3/1.png'),
        require('@/assets/images/panel3/1.png'),
        require('@/assets/images/panel3/1.png')
      ],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction
    }
  },
  mounted () {
    let imgBox = document.getElementsByClassName('imgBox')[0]
    imgBox.innerHTML += imgBox.innerHTML
    let imgDiv = document.getElementsByClassName('imgDiv')
    imgBox.style.width = imgDiv.length * this.imgWidth + 'px'// 设置ul的宽度使图片可以放下
    let that = this
    function autoScroll () {
      if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) { // 向左滚动
        imgBox.style.left = 0
      }
      if (imgBox.offsetLeft > 0) { // 向右滚动
        imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px'
      }
      if (that.theDirection === 'left') {
        that.theSpeed = -Math.abs(that.theSpeed)
      } else {
        that.theSpeed = Math.abs(that.theSpeed)
      }
      imgBox.style.left = imgBox.offsetLeft + that.theSpeed + 'px'
    }
    this.timer = setInterval(autoScroll, 30)// 全局变量 ，保存返回的定时器
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    clickLeft () {
      this.theDirection = 'left'
    },
    clickRight () {
      this.theDirection = 'right'
    }
  }
}
</script>
<style scoped lang='less'>
    .swiperBox{
        // height: 100%;
        height: 200px;
        width: 80%;
        position: relative;
        .directionIcon{
            position: absolute;
            top: 14%;
            width: 120%;
            left: -10%;
            display: flex;
            justify-content: space-between;
            opacity: 0.5;
            .imgLeft{
                left: 50px;
                width: 100px;
                height: 100px;
                background: url("~@/assets/images/panel3/1.png") no-repeat;
                background-size: 80%;
            }
            .imgRight{
                left: 50px;
                width: 100px;
                height: 100px;
                background: url("~@/assets/images/panel3/1.png") no-repeat;
                background-size: 80%;
                transform: rotateY(180deg);
            }
        }
        .directionIcon:hover{
            opacity: 1;
        }
        #swiper{
            width:100%;
            height:100%;
            overflow: hidden;
            position: relative;
            .imgBox{
                position:absolute;
                left:0;
                top:0;
                overflow: hidden;
                display: flex;
                .imgDiv{
                    width: 100%;
                    margin-left: 15px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
        }
    }

</style>

调用轮播组件

import Swiper from '../components/Swiper'
<Swiper :speed="2" :direction="'left'"></Swiper>