vue 封装（移动端）带缩略图预览，联动滑动效果的轮播图组件

由于项目需求不需要自动轮博，我把自动轮播的代码注释了，可根据具体需求进行选择释放，以及改造

<template>
  <div class="ContinuPlay_box">
    <div
      class="items_box"
      @touchstart="TouchStart"
      @touchmove="TouchMove"
      @touchend="TouchEnd"
    >
      <div v-for="(item, index) in banners" class="slide" :key="index">
        <img :src="item" width="100%" height="100%" alt="" />
      </div>
    </div>
    <div class="points_box">
      <div class="points">
        <div
          class="each_point"
          @click="togglePic(index)"
          v-for="(item, index) in banners"
          :key="index"
        >
          <img :src="item" :class="{ current: CurrentImg == index }" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ContinuPlay",
  props: ["banners"], //接受父级组件传过来的banners数据
  data() {
    return {
      bannerwidth: 0, //轮播图宽度
      StartPoint: 0, //触摸开始的点的横坐标
      EndPoint: 0, //触摸结束的点的横坐标
      MoveLength: 0, //StartPoint与EndPoint的差值
      CurrentImg: 0, //当前轮播图的索引
      isPlaying: true, //判断是否处于自动轮播
      playTimer: null, //轮播定时器
    };
  },
  methods: {
    TouchStart(event) {
      //停止轮播
      //   clearInterval(this.playTimer);
      //获取触摸的开始点
      this.StartPoint = event.changedTouches[0].pageX;
    },
    TouchMove(event) {
      //获取触摸的结束点
      this.EndPoint = event.changedTouches[0].pageX;
      this.slidings();
    },
    TouchEnd() {
      this.Jump();
      //开始轮播
      //   this.startPlay();
    },
    //Jump()方法用于处理滑动到一定程度后松手自动跳转到下一页或上一页
    Jump() {
      const currentimg = document.getElementsByClassName("slide");
      //滑动超过轮播图宽度的百分之40，则跳转下一张，否则不跳转
      if (this.MoveLength > 0 && this.CurrentImg !== this.banners.length - 1) {
        if (this.MoveLength > this.bannerwidth * 0.4) {
          this.CurrentImg++;
          currentimg[0].style.marginLeft =
            -this.CurrentImg * this.bannerwidth + "px";
        } else {
          currentimg[0].style.marginLeft =
            -this.CurrentImg * this.bannerwidth + "px";
        }
      } else if (this.MoveLength < 0 && this.CurrentImg !== 0) {
        if (-this.MoveLength > this.bannerwidth * 0.4) {
          this.CurrentImg--;
          currentimg[0].style.marginLeft =
            -this.CurrentImg * this.bannerwidth + "px";
        } else {
          currentimg[0].style.marginLeft =
            -this.CurrentImg * this.bannerwidth + "px";
        }
      }
    },
    //slidings()方法用于处理在滑动过程中，轮播图跟着手指滑动的距离移动
    slidings() {
      //判断是点击还是滑动
      if (this.StartPoint === this.EndPoint) {
        return;
      }
      this.MoveLength = this.StartPoint - this.EndPoint;
      //操作DOM，获取轮播图对象标签
      const currentimg = document.getElementsByClassName("slide");
      //获取轮播图的宽度
      this.bannerwidth = currentimg[0].offsetWidth;
      //判断是否超出滑动范围，即第一页无法再往前一页滑动，最后一页无法再往后一页滑动
      if (this.MoveLength > 0 && this.CurrentImg !== this.banners.length - 1) {
        currentimg[0].style.marginLeft =
          -this.MoveLength - this.CurrentImg * this.bannerwidth + "px";
      } else if (this.MoveLength < 0 && this.CurrentImg !== 0) {
        currentimg[0].style.marginLeft =
          -this.MoveLength - this.CurrentImg * this.bannerwidth + "px";
      }
    },
    //开启轮播
    // startPlay() {
    //   clearInterval(this.playTimer);
    //   this.playTimer = setInterval(() => {
    //     if (this.CurrentImg === 3) {
    //       this.CurrentImg = -1;
    //     }
    //     this.CurrentImg++;
    //     const currentimg = document.getElementsByClassName("slide");
    //     this.bannerwidth = currentimg[0].offsetWidth;
    //     currentimg[0].style.marginLeft =
    //       -this.CurrentImg * this.bannerwidth + "px";
    //     currentimg[0].style.transition = "all 1s ease";
    //   }, 3000);
    // },
    // 点击缩略图切换图片
    togglePic(index) {
      this.CurrentImg = index;
      const currentimg = document.getElementsByClassName("slide");
      this.bannerwidth = currentimg[0].offsetWidth;
      currentimg[0].style.marginLeft = -index * this.bannerwidth + "px";
      console.log(this.bannerwidth);
    },
    mounted() {
      //页面挂在完毕自动开启轮播
      //   this.startPlay();
    },
  },
};
</script>
<style scoped>
.ContinuPlay_box {
  /* height: 80vh; */
  height: calc(100vh - 80px);
  overflow: hidden;
  position: relative;
}
.ContinuPlay_box .items_box {
  height: 80%;
  padding-bottom: 20px;
  display: flex;
}
.ContinuPlay_box .slide {
  flex-shrink: 0;
  /* width: calc(100% + 10px); */
  width: 100%;
  padding-bottom: 30px;
}
.ContinuPlay_box .slide img {
  width: 90%;
  margin-top: 30px;
  border-radius: 4px;
  height: 100%;
}
.points_box {
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.points {
  display: flex;
  height: 70px;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  bottom: 8px;
  justify-content: space-evenly;
  /* border: solid red 1px; */
}
.points .each_point {
  height: 70px;
  flex: 1;
  display: flex;
  background: #fff;
}

.each_point img {
  height: 70px;
  width: 100%;
  filter: brightness(50%);
  margin-right: 5px;
}
.points .current {
  filter: brightness(130%);
}
</style>

在需要使用的页面进行引入

  <Swiper :banners="descImgs" />    // descImgs 图片路径，数组形式