jquery滑塊和滾輪交互

我有一個內容滾動基於在flowplayer偉大的工作。這有一個左側導航面板，每個按鈕都將內容滾動到正確的位置。我在內容的下面放置了一個滑塊，以便來回滾動內容。我希望滾動條和滑塊進行交互，以便在單擊左側導航按鈕之一時，底部的滑塊也會移動。例如如果有四個按鈕，並且我點擊第二個按鈕，那麼滑塊會在四分之一處移動。jquery滑塊和滾輪交互

見我的演示在這裏： http://www.dinosaurus.com.au/clients/slidertest/test2/

代碼：

$(document).ready(function() { 

// main horizontal scroll 
$("#main").scrollable({ 

// basic settings 
vertical: false, 

// up/down keys will always control this scrollable 
keyboard: 'static', 

// assign left/right keys to the actively viewed scrollable 
onSeek: function(event, i) { 
    horizontal.eq(i).data("scrollable").focus(); 
} 

// main navigator (thumbnail images) 
}).navigator("#main_navi"); 

// vertical scrollables. each one is circular and has its own navigator instance 
var vertical = $(".scrollable").scrollable({ 

circular: true, 

// basic settings 
vertical: true 

}).navigator(".navi"); 

// when page loads setup keyboard focus on the first vertical scrollable 
vertical.eq(0).data("scrollable").focus(); 

}); 

// **this is the bottom scroller <- need it to interact with the $("#main").scrollable() function above** 
$(function() { 

//vars 
var conveyor = $("#pages", $("#wrapper")), 
item = $(".page", $("#wrapper")); 

//set length of conveyor 
//conveyor.css("width", item.length * parseInt(item.css("width")) +20); 

//config 
var sliderOpts = { 
    max: (item.length * parseInt(item.css("width"))) - parseInt($("#main",$("#wrapper")).css("width")), 
    slide: function(e, ui) { 
    conveyor.css("left", "-" + ui.value + "px"); 
    } 
}; 

//create slider 
$("#slider").slider(sliderOpts); 

});

請查看頁面結構的源代碼。查詢調用位於底部。

非常感謝您的幫助。

來源

2011-11-19 Adam Fletcher

您可以使用value選項的'滾動「onSeek」事件中 - 有一個與你正在使用的邏輯有點數學...

來源

2011-11-21 05:32:14 Yacov

感謝@yytg。我正在嘗試使用該方法，並將其設置爲基本測試：** onSeek：function（event，i）{horizontal.eq（i）.data（「scrollable」）。focus（）; $（「#slider」）.slider（{value：500}）; }'**宣佈一個固定值來移動它沒有任何成功。 –

在http://jsfiddle.net/上顯示示例 – Yacov

jquery滑塊和滾輪交互

回答

相關問題