javascript - jQuery 周期2 : move through slides on scroll

Question

我目前正在使用 Cycle2 插件创建幻灯片 ( http://jquery.malsup.com/cycle2/ )，而不是在单击时触发幻灯片更改，我想在滚动时触发它。本质上我正在尝试复制这样的东西: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

它有问题的原因是因为每次“滚动单击”或任何您想要调用的事件都会触发该事件。因此，当您滚动时，您会多次触发它，这使得它变得不稳定。

我在这个代码笔中修复了它: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 毫秒将其关闭，这足以使其在下一张图片进入 View 之前不会被触发。