解决swiper悬停延迟情况

写了一篇demo原生的swiper轮播，但是发现一个问题，就是鼠标放上之后达到暂停的效果，但是swiper是等到本次轮播走完再执行暂停，但项目需求是放上去就暂停，移开之后继续播放

将上篇中的两个方法给改掉

 //鼠标移入悬停
  $('.swiper-container').on('mouseenter', function () {
    mySwiper.stopAutoplay();
  })
  //鼠标移出滚动
  $('.swiper-container').on('mouseleave', function () {
    mySwiper.startAutoplay();
  })

改成以下：

// 存放鼠标悬浮时的transform属性（行内属性）
     let nextTransForm = "";
      // 轮播图从暂停位置移动到原本应到的位置所用的时间
      let nextTime = 0;
    //鼠标移入悬停
    $('.swiper-container').on('mouseenter', function(){
      nextTransForm = document
          .getElementsByClassName("mn-swiper")[0]
          .getElementsByClassName("swiper-wrapper")[0].style.transform;
        // 轮播图原本应移动到的位置
        let nextTransPosition =
          -1 *
          parseInt(
            document
              .getElementsByClassName("mn-swiper")[0]
              .getElementsByClassName("swiper-wrapper")[0]
              .style.transform.split("translate3d(")[1]
              .split("px")[0]
          );

        // 鼠标悬浮时时轮播图位置
        let nowTransPosition =
          -1 *
          parseInt(
            window
              .getComputedStyle(
                document
                  .getElementsByClassName("mn-swiper")[0]
                  .getElementsByClassName("swiper-wrapper")[0],
                false
              )
              ["transform"].split("1, ")[2]
              .split(",")[0]
          );
        // 存放鼠标悬浮时轮播图的真实transform属性（非行内属性）
        let nowTransForm = window.getComputedStyle(
          document
            .getElementsByClassName("mn-swiper")[0]
            .getElementsByClassName("swiper-wrapper")[0],
          false
        )["transform"];
        // 计算轮播图从暂停位置移动到原本应到的位置所用的时间（370是我自定义的每个slide的宽度）
        nextTime = 5500 * ((nextTransPosition - nowTransPosition) / 370);
        // 改变行内transform属性
        document
          .getElementsByClassName("mn-swiper")[0]
          .getElementsByClassName(
            "swiper-wrapper"
          )[0].style.transform = nowTransForm;
        // 不写也没关系
        document
          .getElementsByClassName("mn-swiper")[0]
          .getElementsByClassName(
            "swiper-wrapper"
          )[0].style.transitionDuration = "0ms";
        // this.swiper.autoplay.stop();
        mySwiper.stopAutoplay();
    })
    // //鼠标移出滚动
    $('.swiper-container').on('mouseleave', function(){
      document
          .getElementsByClassName("mn-swiper")[0]
          .getElementsByClassName(
            "swiper-wrapper"
          )[0].style.transform = nextTransForm;
        document
          .getElementsByClassName("mn-swiper")[0]
          .getElementsByClassName("swiper-wrapper")[0]
          .style.transitionDuration = nextTime+"ms";
        mySwiper.startAutoplay();
    })

参考地址：https://blog.csdn.net/qq_45560350/article/details/115347482
没细看代码，拿来改了改，挺好用