設置jScrollPane左右自動滾動，但點擊時暫停？

小提琴：http://jsfiddle.net/RJShm/設置jScrollPane左右自動滾動，但點擊時暫停？

我有一個jScrollPane，從左到右滾動，然後左轉，然後停下來。我想要的是從左到右，從右到左繼續滾動，然後重複。我通過使用pane.bind('jsp-scroll-x'...已經非常接近工作了，但似乎無法在一個週期後回滾到右側。對於當前的代碼：

pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) { 
    if (at_right) 
    { 
    api.scrollToX(0); 
    $(this).unbind(event); 
    } 
});

我也想爲這個停車時在窗格中的任何點擊（滾動條，箭頭，內容，任何東西）自動滾動，一下子就沒有了幾秒鐘後，最好重新啓動點擊。

因此，簡而言之，我該怎麼辦：

使JScrollPane的滾動左/右自動
停止自動滾動沒有點擊的窗格
重新啓動自動滾動時

感謝

編輯：jScrollPane Settings和api爲您的方便。

來源

2013-03-07 Samsquanch

我更新了切換無限滾動的處理程序，還實現了點擊處理程序來暫停滾動並在超時（5秒）後恢復。見守則草案下方並檢查DEMO：http://jsfiddle.net/p6jLt/

var defaultSettings = { 
    showArrows: true, 
    animateScroll: true, 
    animateDuration: 5000 
}, 
pauseSettings = { 
    showArrows: true, 
    animateScroll: false 
}; 

var pane = $('.scroll-pane').jScrollPane(defaultSettings); 

var api = pane.data('jsp'); 
var isFirst = true, 
    posX = 0, 
    isLeft = false, 
    timer; 

pane.bind('jsp-scroll-x', scrollFx) 
    .mousedown(function() { 

    //lets make sure the below is 
    //executed only once after automatic croll 
    if (posX != -1) { 
     $(this).unbind('jsp-scroll-x'); 
     api.scrollToX(posX); 
     api.reinitialise(pauseSettings); //no animation 
     posX = -1; 
    } 
}).mouseup(function() { 
    clearTimeout(timer); //clear any previous timer 
    timer = setTimeout(function() { 
     isFirst = true; 
     posX = 0; //reset the killer switch 
     api.reinitialise(defaultSettings); //animateed scroll 
     pane.bind('jsp-scroll-x', scrollFx); //rebind 
     api.scrollToX(isLeft ? 0 : api.getContentWidth()); //resume scroll 
    }, 5000); 
}); 

var scroll = api.scrollToX(api.getContentWidth()); 

function scrollFx(event, pos_x, at_left, at_right) { 
    if (posX == -1) { //kill scroll 
     $(this).unbind(event); 
     return false; 
    } 

    if (at_right) { 
     api.scrollToX(0); 
     isLeft = true; //used for restart 
    } else if (at_left && !isFirst) { 
     api.scrollToX(api.getContentWidth()); 
     isLeft = false; //used for restart 
    } 
    isFirst = false; 
    posX = pos_x; 
}

問題：插件是小馬車與滾動的時候，但是它不破無限滾動。你可能會發現卷軸上的小黑洞，但它大部分是有效的。徹底測試一下，看看它是如何發展的。

來源

2013-03-11 20:01:36

這與我所尋找的非常接近，但它的表現並不像我所希望的那樣。理想情況下，當滾動條被點擊（所以它可以被拖動）或點擊左/右箭頭時，動畫也會停止，並且像普通滾動條一樣運行，直到自動滾動恢復生效。任何方式來做到這一點？ – Samsquanch 2013-03-11 20:17:47

@Samsquanch這個插件似乎不適合這些功能。我們正在編寫特技代碼以從該插件中獲得預期的行爲。讓我明天花點時間看看它是如何發展的。 – 2013-03-11 20:44:17

@Samsquanch嘗試更新的演示，讓我知道。 – 2013-03-12 15:59:37

設置jScrollPane左右自動滾動，但點擊時暫停？

回答

相關問題