Javascript jQuery循环2：滚动幻灯片

我目前正在使用Cycle2插件创建幻灯片（），而不是在单击时触发幻灯片更改。我想在滚动时触发它。本质上，我正在尝试复制这样的东西：但是使用cycle2插件

我已经设置了一个代码笔来演示这个问题：如果你滚动，你会看到我遇到的问题，图像会一直闪烁，并且它一次循环浏览多个图像，通常只是有很多问题。 我目前拥有的代码如下：

$('.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;
});

$（'.cycle slideshow'）。在（'DOMMouseScroll mouseweel'，函数（事件）{
如果（event.originalEvent.detail>0 | | event.originalEvent.wheelDelta<0）{//wheeldeldata的可选选项：wheelDeltaX和wheelDeltaY
$（'.cycle slideshow'）。cycle（'next'）；
console.log（'Down'）；
}否则{
$（'.cycle slideshow'）。cycle（'prev'）；
console.log（'Up'）；
}
//防止页面fom滚动
返回false；
});

---

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

它有bug的原因是每次“滚动点击”或任何你想叫它的时候都会触发该事件。所以当你滚动时，你会多次触发它，这使得它像那样起伏

我在这个代码笔中修复了它：

我所做的是将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);

});

var scrollDisabled=false；
$（'.cycle slideshow'）。在（'DOMMouseScroll mousewheel'，函数（事件）上{
如果（已禁用）
返回；
如果（event.originalEvent.detail>0 | | event.originalEvent.wheelDelta<0）{//wheeldeldata的可选选项：wheelDeltaX和wheelDeltaY
$（'.cycle slideshow'）。cycle（'next'）；
console.log（'Down'）；
}否则{
$（'.cycle slideshow'）。cycle（'prev'）；
console.log（'Up'）；
}
//防止页面fom滚动
scrollDisabled=true；
setTimeout（函数（）{scrollDisabled=false；}，1200）；
});

我基本上是在鼠标滚轮事件被使用后，将其旋转1200毫秒，这足够延迟它在下一张图片进入视图之前不会被触发