手搓无缝轮播

 <!-- 轮播 -->
        <div class="swiper">
          <!-- <div class="prev" @click="prev">
            <img :src="getossurl + 'ddzsc/images/rank/left.png'" alt="" />
          </div> -->
          <!-- 左箭头按钮 -->
          <div class="prev" @click="throttle(PrevFun)">
            <img :src="getossurl + 'ddzsc/images/rank/left.png'" alt="" />
          </div>
          <img
            class="swipertit"
            :src="
              imgShow == 0
                ? getossurl + 'ddzsc/images/rank/one.png'
                : imgShow == 1
                ? getossurl + 'ddzsc/images/rank/two.png'
                : imgShow == 2
                ? getossurl + 'ddzsc/images/rank/three.png'
                : ''
            "
            alt=""
          />
          <div class="SwiperBox" ref="SwiperBox">
            <!-- 图片 -->
            <div
              class="imgBox"
              :style="{ left: `-${leftVal}rem`, transition: `${ition}s` }"
            >
              <img
                :src="getossurl + item.pichttp"
                v-for="(item, index) in Swiperlist"
                :key="index"
                @click="useClick(item.sno, item.essay, index, item)"
              />
              <!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
              <img
                v-if="Swiperlist[0]"
                :src="getossurl + Swiperlist[0].pichttp"
                alt=""
              />
            </div>
          </div>
          <!-- 右箭头按钮 -->
          <div class="next" @click="throttle(NextFun)">
            <img :src="getossurl + 'ddzsc/images/rank/rakright.png'" alt="" />
          </div>
        </div>

data里面的数值:

 swiperItem: "",

      leftVal: 0, // 轮播图盒子的偏移值

      flag: true, // 用来节流防止重复点击

      start: null, // 自动执行下一张定的时器

      imgWidth: 6, // 在这里填写你需要的图片宽度

      ition: 0.6, // 设置轮播图过度时间

      imgShow: 0, // 表示当前显示的图片索引

methods: {
    // 此为自动轮播定时器
    createSwiper() {
      this.start = setInterval(() => {
        this.NextFun();
      }, 3000);
    },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    throttle(fun) {
      if (this.flag) {
        this.flag = false;
        fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
        setTimeout(() => {
          this.flag = true;
        }, 650); // 设置节流间隔时间,不得小于图片过渡时间
      }
    },
    // 上一张
    PrevFun() {
      clearInterval(this.start);
      if (this.leftVal == 0) {
        setTimeout(() => {
          // 判断显示的图片 是 第一张时执行
          // this.imgList.length是指循环图片数组的图片个数
          this.ition = 0; // 将过渡时间变成0，瞬间位移到最后一张图
          this.imgShow = this.Swiperlist.length - 1; // 将高亮小点改为最后一张图
          this.leftVal = this.Swiperlist.length * this.imgWidth; // 瞬间移动
          this.$nextTick(() => {
            // $nextTick是一个vue内置函数,是一个等待dom元素更新后执行的回调函数
            setTimeout(() => {
              // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
              this.ition = 0.6;
              // this.imgShow = this.imgList.length;
              this.leftVal -= this.imgWidth;
            }, this.ition * 1000);
          });
        });
      } else {
        // 判断显示的图片 不是 第一张时执行
        this.ition = 0.6;
        this.leftVal -= this.imgWidth;
        this.imgShow--;
      }
      this.start = setInterval(() => {
        this.NextFun();
      }, 3000);
    },
    // 下一张
    NextFun() {
      clearInterval(this.start);
      if (this.leftVal == (this.Swiperlist.length - 1) * this.imgWidth) {
        // 判断显示的图片 是 最后一张时执行
        this.ition = 0.6;
        this.leftVal += this.imgWidth;
        this.imgShow = 0;
        this.$nextTick(() => {
          setTimeout(() => {
            this.ition = 0;
            this.leftVal = 0;
          }, this.ition * 1000);
        });
      } else {
        // 判断显示的图片 不是 最后一张时执行
        this.ition = 0.6;
        this.leftVal += this.imgWidth;
        this.imgShow++;
      }
      this.start = setInterval(() => {
        this.NextFun();
      }, 3000);
    },
},

带上左右箭头可点击