swiper轮播图鼠标移入暂停有延时的问题

最新推荐文章于 2024-05-22 13:52:22 发布

azjasd

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量802

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/azjasd/article/details/126407521

版权

鼠标移入三个swiper同时停止，鼠标离开三个swiper同时开始
没有解释，直接使用吧

  //鼠标移入事件
  stop(){
      this.stopSwiper(0);
     this.stopSwiper(1);
    this.stopSwiper(2);
 
},
stopSwiper(i) {
  console.log("refs", this.$refs);
  this.nextTransForm= this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0].style.transform
  console.log(this.nextTransForm);

   let nextTransPosition =
      -1 *
      parseInt(
        this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0]
          .style.transform.split("translate3d(")[1]
          .split("px")[0]
      );
      let nowTransPosition =
      -1 *
      parseInt(
        window
          .getComputedStyle(
            this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0],
            false
          )
          ["transform"].split("1, ")[2]
          .split(",")[0]
      );
      console.log('now',nowTransPosition);

      let nowTransForm = window.getComputedStyle(
        this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0],
      false
    )["transform"];
    console.log('nowtransform',nowTransForm);

    this.nextTime = 7000 * ((nextTransPosition - nowTransPosition) / 310);

   
      this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0].style.transform = nowTransForm;
     this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0].style.transitionDuration = "0ms";

  this.$refs.swiper[i].$swiper.autoplay.stop();

},

//鼠标离开事件
 leave(){ 
      this.start(0);
      this.start(1);
      this.start(2);
    },
    start(i) {
     

     this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0].style.transform = this.nextTransForm;
     this.$refs.swiper[i].$swiper.$el[0].dom7ElementDataStorage.swiper.$wrapperEl[0].style.transitionDuration = this.nextTime+'ms';
     this.$refs.swiper[i].$swiper.autoplay.start();

    },