我有一个基于 flowplayer 出色工作的内容滚动器。这有一个带有按钮的左侧导航面板，每个按钮将内容滚动到正确的位置。我在内容下方放置了一个滑块，该滑块也可以来回滚动内容。我希望滚动条和滑块进行交互，以便当我单击左侧导航按钮之一时，底部的滑块也会移动。例如，如果有四个按钮并且我单击第二个按钮，则滑块将移动四分之一。
在此处查看我的演示： 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);
});
请查看页面结构的源代码。查询调用位于底部。
提前谢谢你的帮助。