vue 用JQ实现的轮播图带放大镜

HTML部分：

​
                        <div class="preview">
                            <img :src="defaultSrc" alt=""/>
                            <div id="zoom"></div>
                            <div id="mask"></div>
                            <div class="small">
                                <div id="left" class="Left"> < </div>
                                <div class="Imgs">
                                    <div class="boxImg">
                                        <img v-for="(banner,idx) in data.imgUrlList"
                                             :key="banner.id"
                                             @click="handleImgClick(imgUrl+banner.imgList,idx)"
                                             :src="imgUrl+banner.imgList" alt="">
                                    </div>
                                </div>
                                <div id="right" class="Righ"> > </div>
                            </div>
                        </div>
                        <div class="after">
                            <img src="" alt=""/>
                        </div>

​

样式：

.preview {
  position: relative;
  width: 100%; /*400px*/
  height: 300px;
  border: 1px solid #ccc;
  float: left;
  .small {
    width: 100%;
    height: 90px;
    border: 1px solid #eee;
    position: absolute;
    left: 0;
    bottom: -95px;
    display: flex;
    justify-content: space-between;
    .Left,
    .Righ {
      width: 10px;
      height: 100%;
      background-color: #eee;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .Imgs {
      width: 366px;
      overflow: hidden;
      .boxImg {
        height: 100%;
        width: 1000px;
        white-space: nowrap;
        img {
          width: 90px;
          height: 100%;
          display: inline;
          margin-left: 5px;
          border: 1px solid #eee;
          cursor: pointer;
        }
      }
    }
  }
}
.preview img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
/*放大镜*/
#zoom {
  position: absolute;
  display: none;
  width: 150px;
  height: 150px;
  background: pink;
  z-index: 10;
  opacity: 0.5;
}
/*大图*/
.after {
  position: absolute; /*relative*/
  left: 100%;
  top:0;
  display: none;
  width: 400px;
  height: 300px; /*400*/
  border: 1px solid #ddd;
  float: left;
  overflow: hidden;
  z-index: 100;
  background-color: #fff;
}
/*移动父元素--画布*/
#mask {
  width: 100%; /*400px*/
  height: 100%; /*400px*/
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  background: deeppink;
  opacity: 0;
}
.after > img {
  position: absolute;
}

JS：

methods: {
    load() {
      var $preview = $(".preview");
      var $zoom = $("#zoom");
      var $after = $(".after");
      var $mask = $("#mask");
      $mask.mousemove(function(event) {
        var $bigImg = $(".after>img");
        $bigImg.attr("src", $(".preview>img").attr("src"));
        var boxW = $preview.width();
        var boxH = $preview.height();
        var x = event.offsetX;
        var y = event.offsetY;
        var w = $zoom.width();
        var h = $zoom.height();
        var W = $bigImg.width();
        var H = $bigImg.height();
        var rw = $mask.width();
        var rh = $mask.height();
        var Bw = W / rw;
        var Bh = H / rh;
        $zoom.show();
        $after.show();
        var left;
        var top;
        //left   min=0  正常  x-w/2   max =400-w
        if (x < w / 2) {
          left = 0;
        } else {
          if (x > boxW - w / 2) {
            left = boxW - w;
          } else {
            left = x - w / 2;
          }
        }
        if (y < h / 2) {
          top = 0;
        } else {
          if (y > boxH - h / 2) {
            top = boxH - h;
          } else {
            top = y - h / 2;
          }
        }
        $zoom.css("left", left);
        $zoom.css("top", top);
        $bigImg.css("left", -left * Bw);
        $bigImg.css("top", -top * Bh);
        /*console.log(W);*/
      });
      $preview.mouseout(function() {
        $zoom.hide();
        $after.hide();
      });
      /*左右滑动*/
      let num1 = 0;
      $("#left").click(function() {
        let len = $(".boxImg>img").length,
          width = len * 95;
            console.log(num1,width);
          /*num1 < width*/
        if (num1 < width) {
          num1 += 95;
          $(".boxImg").animate(
            { marginLeft: `-${num1}px` },
            300,
            "linear",
            function() {
              /*console.log(num1,width)*/
              /*$(".boxImg").css({marginLeft:"0px"});
                             $(".boxImg img:first").remove().clone(true).appendTo(".boxImg");*/
            }
          );
        }
      });
      $("#right").click(function() {
          /*console.log(num1);*/
        if (num1 > 0) {
          num1 -= 95;
          $(".boxImg").animate(
            { marginLeft: `-${num1}px` },
            300,
            "linear",
            function() {
              /*console.log(num1)*/
              /*$(".boxImg").css({marginLeft:"0px"});
                             $(".boxImg img:last").remove().clone(true).prependTo(".boxImg");*/
            }
          );
        }
      });
    },

/*轮播小图点击*/
    handleImgClick(url, index) {
      $(".preview>img").attr("src", url);
      $(".boxImg>img")
        .css({ border: "1px solid #eee" })
        .eq(index)
        .css({ border: "1px solid red" });
    },
},

mounted() {
    this.load();
}