jquery滑块和滚动条交互

Question

我有一个基于 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);

});

页面结构请查看源代码。查询调用位于底部。

提前感谢您的帮助。

Answer 1

您可以在 'scrollable'.'onSeek' 事件中使用 value 选项 -您正在使用的逻辑有一些数学知识......