jQuery cycle2：滚动幻灯片

Question

我目前正在使用 Cycle2 插件创建幻灯片（http://jquery.malsup.com/cycle2/), instead of triggering the slide change on click I want to trigger it when you scroll. Essentially I'm trying replicate something like this: http://loris-cormoreche.com 但使用 cycle2 插件。

我设置了一个 codepen 来演示这个问题：http://codepen.io/neal_fletcher/pen/NrRdmP 如果你滚动你会看到我遇到的问题，图像不断闪烁并且一次循环显示多个图像同样，总的来说只是很麻烦。我目前的代码如下：

$('.cycle-slideshow').on( 'DOMMouseScroll mousewheel', function ( event ) {
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        $('.cycle-slideshow').cycle('next');
        console.log('Down');
    } else {
       $('.cycle-slideshow').cycle('prev');
       console.log('Up');
    }
    //prevent page fom scrolling
    return false;
});

如有任何改进建议或方法，我们将不胜感激！

Answer 1

它有问题的原因是因为事件在每个 "scroll-click" 或任何你想调用它的时候触发。因此，当您滚动时，您会多次触发它，这使得它像那样起伏不定。

我在这个代码笔中修复了它：http://codepen.io/LinusAronsson/pen/EygWpd

我所做的是将 jQuery 更改为以下内容：

var scrollDisabled = false;
$('.cycle-slideshow').on('DOMMouseScroll mousewheel', function(event) {

 if (scrollDisabled)
     return;

  if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
  $('.cycle-slideshow').cycle('next');
    console.log('Down');
  } else {
    $('.cycle-slideshow').cycle('prev');
  console.log('Up');
    }
   //prevent page fom scrolling

   scrollDisabled = true;
   setTimeout(function(){scrollDisabled = false;}, 1200);

});

我基本上是在使用鼠标滚轮事件后将其关闭 1200 毫秒，这足以让它在下一张图片进入视图之前不会被触发。

jQuery cycle2：滚动幻灯片

jQuery cycle2: move through slides on scroll

html

javascript

jquery

jquery-cycle