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滑块和滚轮交互

回答

相关问题