基于element和swiper重写一个手动轮播图

在element中使用swiper坑太多，于是重写了个手动轮播图，一大五小图片构造展示。

本来之前写了个公共demo，后来弄丢了，所以想改显示几个小图片需要手动去js方法里改(注意判断的数字)。

具体的原因已经过去两年，已经无法追忆，代码量过多只贴部分关键代码展示~

左右滑动使用jquery的animate动画实现，css、js大部分依赖使用的swiper的，部分是手动新增修改的。

html部分:

<!-- 手写轮播图 -->
<div class="handSwiper">
  <div class="vr-box" v-if="houseSourceInfo.vrRealmName != null && this.cjsSlidePage.index == 0" @click="toVrHref()">
    <i class="icon iconfont iconvrx"></i>
  </div>
  <div class="bigSwiper" ref="bigRef" @mousedown="downActive($event)">
    <div v-for="(item, index) in houseImgUrlList">
      <img :src="GLOBAL.OSS_GETPOINT + item.imgUrl + GLOBAL.OSS_STYLE">
    </div>
  </div>
  <div class="swiper-button-prev swiper-button-white btn" slot="button-prev" @click="prev()" ></div>
  <div class="swiper-button-next swiper-button-white btn" slot="button-next" @click="next()"></div>
  <div class="smallFrame">
    <div class="smallSwiper">
      <div v-for="(item, index) in houseImgUrlList" class="smallCtro">
        <img :src="GLOBAL.OSS_GETPOINT + item.imgUrl + GLOBAL.OSS_STYLE">
        <div @click="moveSmallSwiper(index)" v-bind:class="{blackMask:index!=0}"></div>
      </div>
    </div>
  </div>
</div>

js:

export default {
  data() {
    return {
      houseSourceInfo: {},
      houseImgUrlList: [],
      cjsSlidePage: {
        index: 0,             // 第几个图片
        numTotal: 0,          // 图片总数
        swiperSpace: 0,       // 向左移动图片px长度
        addBaskIndex: 0,      // 上一个添加蒙版index
        smallSwiperSpace: 0   // 小图向左移动图片px长度
      },
      cjsPositionSlidePage : {
        index: 0,             // 第几个图片
        numTotal: 0,          // 图片总数
        swiperSpace: 0,       // 向左移动图片px长度
      },
      testWidth: 0
    }
  },
  methods: {
    // 轮播图
    prev() {
      if (this.cjsSlidePage.index == 0) {
        this.cjsSlidePage.swiperSpace = -(600 * (this.cjsSlidePage.numTotal - 1));
        this.cjsSlidePage.index = this.cjsSlidePage.numTotal - 1;
        if (this.cjsSlidePage.index < 4) {
          this.cjsSlidePage.smallSwiperSpace = 0;
        } else {
          this.cjsSlidePage.smallSwiperSpace = -(132 * (this.cjsSlidePage.numTotal - 4))
        }
      } else {
        this.cjsSlidePage.swiperSpace += 600;
        this.cjsSlidePage.index -= 1;
        if (this.cjsSlidePage.index < 2) {
          this.cjsSlidePage.smallSwiperSpace = 0;
        } else if (this.cjsSlidePage.index > this.cjsSlidePage.numTotal - 3) {
          this.cjsSlidePage.smallSwiperSpace = -(132 * (this.cjsSlidePage.numTotal - 4));
        } else {
          this.cjsSlidePage.smallSwiperSpace += 132;
        }
      }
      // 小图蒙版移动
      $('.smallCtro div').eq(this.cjsSlidePage.addBaskIndex).addClass('blackMask');
      $('.blackMask').eq(this.cjsSlidePage.index).removeClass('blackMask');
      this.cjsSlidePage.addBaskIndex = this.cjsSlidePage.index;
      $('.bigSwiper').animate({left:this.cjsSlidePage.swiperSpace + 'px'});
      $('.smallSwiper').animate({left:this.cjsSlidePage.smallSwiperSpace + 'px'});
    },
    next() {
      if (this.cjsSlidePage.index == this.cjsSlidePage.numTotal - 1) {
        this.cjsSlidePage.swiperSpace = 0;
        this.cjsSlidePage.index = 0;
        this.cjsSlidePage.smallSwiperSpace = 0;
      } else {
        this.cjsSlidePage.swiperSpace -= 600;
        this.cjsSlidePage.index += 1;
        if (this.cjsSlidePage.index < 2) {
          this.cjsSlidePage.smallSwiperSpace = 0;
        } else if (this.cjsSlidePage.index > this.cjsSlidePage.numTotal - 3) {
          if (this.cjsSlidePage.index < 3) {
            this.cjsSlidePage.smallSwiperSpace = 0;
          } else {
            this.cjsSlidePage.smallSwiperSpace = -(132 * (this.cjsSlidePage.numTotal - 4));
          }
        } else {
          this.cjsSlidePage.smallSwiperSpace -= 132;
        }
      }
      // 小图蒙版移动
      $('.smallCtro div').eq(this.cjsSlidePage.addBaskIndex).addClass('blackMask');
      $('.blackMask').eq(this.cjsSlidePage.index).removeClass('blackMask');
      this.cjsSlidePage.addBaskIndex = this.cjsSlidePage.index;
      $('.bigSwiper').animate({left:this.cjsSlidePage.swiperSpace + 'px'});
      $('.smallSwiper').animate({left:this.cjsSlidePage.smallSwiperSpace + 'px'});
    },
    downActive(e) {
      console.log("点击：" + e.offsetX);
      var clickX = e.offsetX;
      if (clickX >= 600/2) {
        this.next();
      } else {
        this.prev();
      }
    },
    moveSmallSwiper(index) {
      this.cjsSlidePage.swiperSpace = -(index * 600);
      this.cjsSlidePage.index = index;
      if (this.cjsSlidePage.index < 2 || this.cjsSlidePage.numTotal < 4) {
        this.cjsSlidePage.smallSwiperSpace = 0;
      } else if (this.cjsSlidePage.index > this.cjsSlidePage.numTotal - 3) {
        this.cjsSlidePage.smallSwiperSpace = -(132 * (this.cjsSlidePage.numTotal - 4));
      } else {
        this.cjsSlidePage.smallSwiperSpace = -(132 * (this.cjsSlidePage.index - 1));
      }
      $('.smallCtro div').eq(this.cjsSlidePage.addBaskIndex).addClass('blackMask');
      $('.blackMask').eq(index).removeClass('blackMask');
      this.cjsSlidePage.addBaskIndex = index;
      $('.bigSwiper').animate({left:this.cjsSlidePage.swiperSpace + 'px'});
      $('.smallSwiper').animate({left:this.cjsSlidePage.smallSwiperSpace + 'px'});
    }
  }
}

css:

.handSwiper {
    width: 100%;
    overflow: hidden;
  }
  // 大图轮播
  .handSwiper .btn {
    top: 92%;
  }
  .bigSwiper {
    text-align: center;
    display: -webkit-box;
    position: relative;
  }
  .bigSwiper div {
    width: 600px;
  }
  .bigSwiper img {
    width: 600px;
    height:450px;
  }
  // 小图轮播
  .smallFrame {
    width: 516px;
    margin: 0 auto;
    overflow: hidden;
  }
  .smallSwiper {
    text-align: center;
    display: -webkit-box;
    position: relative;
    height: 90px;
    margin-top: 17px;
  }
  .smallSwiper div {
    width: 120px;
    margin-right:12px;
  }
  .smallSwiper div.smallCtro{
    position: relative;
  }
  .smallSwiper img {
    width: 120px;
    height: 90px;
  }
  .smallSwiper div.blackMask {
    width: 120px;
    height: 90px;
    background-color: #00000070;
    position: absolute;
    top: 0;
  }
  .handSwiper .btn {
    background-color: #333;
    width: 32px;
    height: 90px;
    margin-top: -45px;
    background-size: 13px 20px;
  }
}