vue商品轮播图：下面轮播上面显示图片

 更改之后少于四张图片也能正常播放

htlm部分：

<el-row style="width: 840px;height: 100%;padding: 20px 20px 10px;">
        <div style="width: 100%;height: 100%;text-align: center;"
             v-if="this.details.proPicList.picUrl == ''">
          <img src="../../../assets/images/136.png"
               style="width:298.56px;height:171.76px; margin-top: 150px;"
               alt="">
        </div>
        <div style=" width: 100%;height: 100%;"
             v-if="this.details.proPicList.picUrl!=''">
          <div style="width:100%;height:460px">
            <img :src="mainpicUrl"
                 @error="setDefaultImage"
                 style="width:100%;height:100%">
          </div>

          <div class="SwiperBox"
               style=" margin-top:15px "
               @mouseenter="MouseFun('moveIn')"
               @mouseleave="MouseFun('moveOut')">
            <!-- 图片 -->
            <div class="imgBox"
                 :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
              <img @click="instFun(item,index)"
                   :src="item.picUrl"
                   v-for="(item,index) in details.proPicList"
                   :key="index"
                   :class="index === imgShow ? 'img_activeBorder' : '' " />
            </div>
            <!-- 左箭头按钮 -->
            <div class="leftBtn"
                 @click="PrevFun"><i class="el-icon-arrow-left"></i></div>
            <!-- 右箭头按钮 -->
            <div class="rightBtn"
                 @click="NextFun"><i class="el-icon-arrow-right"
                 style=" display: block; "></i></div>
          </div>
        </div>

      </el-row>

导入加载中图片：

import defaultImage from '@/assets/images/135.gif'

data部分：

 data () {
    return {
      details: {
        //照片
        proPicList: [
          {
            id: "",//id
            projectId: "",//所属标的项目
            picUrl: "",//图片地址
            picSize: null,//图片打小
            picTitle: "",//图片标题
            picType: null,//图片类型
            picState: null,//图片状态
          }
        ],
      },
      mainpicUrl: '',
      leftVal: 0,  // 轮播图盒子的偏移值
      flag: true, // 用来节流防止重复点击
      start: null, // 自动执行下一张定的时器
      imgWidth: 200,  // 在这里填写你需要的图片宽度
      ition: 0.8, // 设置轮播图过度时间
      imgShow: 0, // 表示当前显示的图片索引

    }
  },

js部分：

setDefaultImage (e) {
      e.target.src = defaultImage
    },
// 轮播图
    // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
    MouseFun (type) {// 停止定时器            // 重新执行定时器
      type == 'moveIn' ? clearTimeout(this.start) : this.carousel()
    },
    // 此为自动轮播定时器
    carousel () {
      this.start = setInterval(() => {
        this.NextFun()
      }, 1000)
    },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    // throttle (fun) {
    //   if (this.flag) {
    //     this.flag = false;
    //     fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
    //     setTimeout(() => {
    //       this.flag = true;
    //     }, 1200); // 节流间隔时间
    //   }
    // },
    // 上一张
    PrevFun () {
      let i = this.imgShow
      if (this.imgShow == 0) { // 判断显示的图片 是 第一张时执行
        // this.details.proPicList.length是指循环图片数组的图片个数
        this.ition = 0 // 将过渡时间变成0，瞬间位移到最后一张图
        this.imgShow = this.details.proPicList.length - 1 // 将图片改为最后一张图
        this.leftVal = (this.details.proPicList.length - 4) * this.imgWidth // 瞬间移动
        this.mainpicUrl = this.details.proPicList[i].picUrl
        setTimeout(() => {  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
          this.ition = 0
          this.leftVal -= this.imgWidth
        }, 1000)
      } else { // 判断显示的图片 不是 第一张时执行
        this.ition = 0.8
        this.leftVal -= this.imgWidth
        this.imgShow--
        this.mainpicUrl = this.details.proPicList[i].picUrl
      }
    },
    // 下一张
    NextFun () {
      let i = this.imgShow
      if (this.details.proPicList.length <= 4) {
        this.ition = 0.8
        this.leftVal = 0
        this.imgShow++
        this.mainpicUrl = this.details.proPicList[i].picUrl
        if (this.imgShow >= this.details.proPicList.length) {
          this.ition = 0.8
          this.leftVal = 0
          this.imgShow = 0
          this.mainpicUrl = this.details.proPicList[i].picUrl
          setTimeout(() => {
            this.ition = 0
            this.leftVal = 0
          }, 0)
        }
      } else
        if (this.imgShow <= 2 || this.details.proPicList.length - 1 < this.imgShow > this.details.proPicList.length - 4) {
          this.ition = 0.8
          this.leftVal = 0
          this.imgShow++
          this.mainpicUrl = this.details.proPicList[i].picUrl
          if (this.imgShow > this.details.proPicList.length - 1) {
            if (this.imgShow == this.details.proPicList.length - 1) { // 判断显示的图片 是 最后一张时执行
              this.ition = 0.8
              this.leftVal = 0
              this.imgShow = 0
              this.mainpicUrl = this.details.proPicList[i].picUrl
              setTimeout(() => {
                this.ition = 0
                this.leftVal = 0
              }, 0)
            } else { // 判断显示的图片 不是 最后一张时执行
              this.ition = 0.8
              this.leftVal += this.imgWidth
              this.imgShow++
              this.mainpicUrl = this.details.proPicList[i].picUrl
            }

          }
        } else
          if (this.imgShow > 2 || this.imgShow < this.details.proPicList.length - 3) {
            if (this.leftVal == (this.details.proPicList.length - 4) * this.imgWidth) { // 判断显示的图片 是 最后一张时执行
              this.ition = 0.8
              this.leftVal + this.imgWidth
              this.imgShow = 0
              this.mainpicUrl = this.details.proPicList[i].picUrl
              setTimeout(() => {
                this.ition = 0
                this.leftVal = 0
              }, 0)
              this.mainpicUrl = this.details.proPicList[i].picUrl
            } else { // 判断显示的图片 不是 最后一张时执行
              this.ition = 0.8
              this.leftVal += this.imgWidth
              this.imgShow++
              this.mainpicUrl = this.details.proPicList[i].picUrl
            }
          }

    },
    // 点击 图片
    instFun (item, index) {
      if (this.imgShow <= 1) {
        this.ition = 0.8
        this.leftVal = this.leftVal
      } else if (this.imgShow = this.details.proPicList.length - 1) {
        this.ition = 0.8
        this.leftVal = this.leftVal
      } else {
        this.ition = 0.8
        this.leftVal += this.imgWidth
      }
      this.imgShow = index
      this.mainpicUrl = item.picUrl
      console.log(this.imgShow)
    },

样式部分：

.img_activeBorder {
  border: 4px solid #409eff;
}

/* 图片容器样式 */
.SwiperBox {
  position: relative;
  width: 800px;
  height: 150px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.imgBox {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 200px;
  height: 150px;
  display: flex;
  justify-content: flex-start;
}
/* 图片默认样式 */
.imgBox img {
  flex-shrink: 0;
  width: 196px;
  height: 120px;
  margin: 2px;
}
/* 两个按钮共有的样式,也可直接使用箭头图片替代 */
.leftBtn, .rightBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(109, 109, 109, 0.445);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.leftBtn {
  left: 10px;
}
.rightBtn {
  right: 10px;
}
.inst:last-child {
  margin-right: 0px;
}