4

我正在处理一个非常标准的 Flexslider 实例。 Flexslider与jquery.mousewheel.js插件很好地结合在一起，允许幻灯片在鼠标滚轮事件上移动。

然而，Mac OSX 和其他人使用“intertia”来滚动效果，几乎不可能只向左或向右滚动一张幻灯片。一般的效果是，在这些情况下，即使是最轻微的滚动动作也会触发多个鼠标滚轮事件并左右滚动滑块多个图像。显然，这不可能发生！

我认为解决方案是使用underscore.js - 特别是“去抖动”功能。但是，我在 JS / jQuery 方面相对缺乏经验，无法弄清楚如何实现它。

来自下划线的文档：

去抖： _.debounce(function, wait, [immediate])

创建并返回传递函数的新去抖动版本，该版本将推迟其执行，直到自上次调用以来等待毫秒过去后。对于实现仅在输入停止到达后才应发生的行为很有用。例如：渲染 Markdown 注释的预览，在窗口停止调整大小后重新计算布局等等。

为立即参数传递 true 以导致去抖动在等待间隔的前沿而不是后沿触发函数。在防止意外双击“提交”按钮再次触发等情况下很有用。

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

这是我用来初始化 flexslider 的代码：

// MOUSEWHEEL FIX:

function debounceEffect() { // apply debounce to mousewheel here

}

// Initialize FlexSlider
$(window).load(function() {     
    $('div.flexslider').flexslider({
        animation:'slide',
        controlNav:true,
        mousewheel:true,
        pauseOnHover:true,
        direction:'horizontal',
        animationSpeed:500,
        slideshowSpeed:5000,
        after:debounceEffect
    });
});

不幸的是，我不知道如何将去抖动功能应用于鼠标滚轮事件。我想我只是不太了解运动部件。

这是来自 flexslider 插件的相关代码：

    // MOUSEWHEEL:
    if (vars.mousewheel) {
      slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
        slider.flexAnimate(target, vars.pauseOnAction);
      });
    }

如果这很重要，我可以编辑它以包含一些鼠标滚轮插件代码，或者你可以在github上查看它。

我将不胜感激任何帮助！

4

2 回答 2

1

我认为主要问题是您将无法应用去抖动作为后效，或者至少我不知道如何。让我们来谈谈这些部分是如何工作的：

当您调用 时$('div.flexslider').flexslider({ .. }，jQuery 会像div.flexslider往常一样找到所有元素，然后向其中添加一个 flexslider。flexslider 添加了所有机制以使其成为滑块，包括设置绑定事件。您需要去抖动的是实际的绑定事件本身。

通过找到相关的 flexslider 绑定代码，您似乎已经非常接近了。我认为理想情况下您想要的是：

if (vars.mousewheel) {
  slider.bind('mouse wheel', _.debounce(function(…) {
   // usual flex slider code.
  }), 300);
}

我不确定在不直接编辑 flexslider 代码的情况下如何实际注入这种去抖动。

如果您想全局影响鼠标滚轮事件（我猜您可能会这样做），您可能可以对鼠标滚轮插件本身进行去抖动处理。我认为您必须将处理程序包装在去抖动中，然后将去抖动处理程序传递给addEventListener和removeEventListener。

于 2013-07-23T17:29:39.193 回答
1

看起来这个问题仍然存在。

使用这个 debounce插件并更改 flexslider.js，我得到了一些很好的结果，所以它是以下内容：

slider.bind('mousewheel', $.debounce( 100, true, function(event, delta, deltaX, deltaY){
     event.preventDefault();
     var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');

    slider.flexAnimate(target, slider.vars.pauseOnAction);
}));
于 2014-11-26T13:26:59.407 回答