Question

我正在寻找一种在用户滚动页面时暂停我的BSXlider轮播的方法。这可能吗？一直在使用slider.stopAuto（）命令 - 但它不起作用？当我尝试使用它时，我收到Firebug错误...

BXSlider代码调用是：

var slider = $('.bxslider').bxSlider({
mode: 'horizontal', 
auto:true,
speed: 1000,
pause: 3500,
controls:true,
pager: false,
keyboardEnabled: true
});

然后我试图使用

$(document).scroll(function(){
      slider = $('.bxslider').bxSlider();
      slider.stopAuto();
      return false;
});

有什么想法吗？我还希望滑块在滚动完成后重新启动自动播放...

干杯

dubbs。

Answer 1

在你的窗口中，滚动设置稍微延迟后的开始和停止。

 $(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    slider.stopAuto();

    $.data(this, 'scrollTimer', setTimeout(function() {
      slider.startAuto();
      return false;

    }, 250));
  });

取自：

https://stackoverflow.com/a/14092859

以下是一个完整的例子：

http://plnkr.co/edit/Z0ThJJo66MnMyDw2UVY5?p=preview

现在它检查滚动是否在250毫秒后停止。如果它已经停止，那么它会调用stopAuto（）。您可以根据需要调整MS延迟时间。

最初，我认为可能回调可能有效，但我认为滚动事件就是您所需要的。

这个BXslider事件回调不是必需的，但为了完整性我将其包括在内：

onSlideAfter: function(){
    // if scrolling stop
   if (isScrolling){
       slider.stopAuto();
   }    
   // else continue
   else{
       slider.startAuto();
   }
  }

在窗口滚动上停止BXSlider

1 个答案: