jQuery cycle2：滾動瀏覽幻燈片

我目前使用Cycle2插件來創建幻燈片（http://jquery.malsup.com/cycle2/），而不是在點擊時觸發幻燈片更改，我想在滾動時觸發它。基本上我試圖複製這樣的東西：http://loris-cormoreche.com，但與循環2插件。jQuery 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; 
});

任何建議或方法來改善這一點，將不勝感激！

來源

2016-06-18 user1374796

它的錯誤之所以是因爲每次「滾動點擊」或任何你想要調用它的事件都會觸發事件。所以當你滾動的時候你會觸發它幾次，這會使得它變得像這樣波濤洶涌。

我固定它在這個codepen：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毫秒關閉鼠標滾輪事件已被使用後，，在下一張照片進入視圖之前，這足以延遲它不被觸發。

來源

2016-06-19 01:25:09 torus

jQuery cycle2：滾動瀏覽幻燈片

回答

相關問題