手写banner切换方式

<template>
  <!-- banner轮播切换 -->
  <div class="banner-wrapper">

    <div class="banner-info">

      <ul class="box" ref="box">

        <li v-for="(item, index) in bannerList" :key="index">

          <img :src="item.img" alt="" />

        </li>

      </ul>

    </div>

  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      bannerList: [
        { img: '/img/ocean_bck.png' },
        { img: '/img/bck.png' },
        { img: '/img/ocean_bck.png' },
        { img: '/img/bck.png' },
        { img: '/img/ocean_bck.png' },
        { img: '/img/bck.png' },
        { img: '/img/ocean_bck.png' },
        // { img: '/img/bck.png' }
      ],
      timer: null,
      oBox: '',
      leftVal: 0,
      count: 0,
      iconCount: 0,
      screenWidth: document.body.clientWidth, // 获取屏幕宽度
      textList: []
    }
  },
  mounted() {
    let repeat = [this.bannerList[0]]
    this.bannerList = this.bannerList.concat(repeat)
    this.inits()
  },
  methods: {
    inits() {
      this.oBox = this.$refs.box;
      /*
      this.count等于0，播放第一张，this.count等于1，播放第二张，以此类推
      */
      this.timer = setInterval(() => {
        this.leftVal = `-${838 + 838 * this.count}px` //左边的left值
        this.count++
        let len = this.bannerList.length //轮播图片总张数
        if (this.count === len) {
          /*临界值，此时最后一张图片已经播放完了，最后一张图和第一张图是一样的，目的是为了无缝衔接，
          此时需要跳转到第一张图片,随后瞬间滑到第二张图，达到无缝观感
          */
          this.count = 1; //为了下次循环开始跳转第三张，所以设置为1
          this.oBox.style.transition = `all 0s ease-in-out`;
          this.oBox.style.left = 0;
          this.setTimeoutTimer = setTimeout(() => {
            this.oBox.style.transition = `all 0.5S ease-in-out`;
            // this.oBox.style.opacity = `0`
            this.oBox.style.left = `-` + 838 + `px`;
            clearTimeout(this.setTimeoutTimer)
            this.setTimeoutTimer = null
          }, 200);

        } else { //正常循环
          this.oBox.style.transition = `all 0.5S ease-in-out`;
          // this.oBox.style.opacity = `0`
          this.oBox.style.left = this.leftVal
        }
      }, 2000)
    },
  },
}
</script>

<style scoped>
.banner-wrapper {
  width: 100%;
  height: 100%;
}

.banner-info {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.box {
  display: flex;
  position: absolute;
  transition: all 0.5S ease-in-out;
  left: 0;
}

.box>li>img {
  width: 838px;
}
</style>