2
flowplayer에서 위대한 작품을 기반으로 콘텐츠 스크롤러가 있습니다. 여기에는 왼쪽 네비게이션 패널이 있으며, 각 네비게이션 버튼은 컨텐츠를 올바른 위치로 스크롤합니다. 콘텐트를 앞뒤로 스크롤하는 슬라이더를 콘텐트 아래에 배치했습니다. 스크롤러와 슬라이더가 상호 작용하여 왼쪽 탐색 버튼 중 하나를 클릭하면 아래쪽의 슬라이더도 가로 질러 움직입니다. 예. 4 개의 버튼이 있고 두 번째 버튼을 클릭하면 슬라이더가 4 분의 1로 이동합니다. 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);
});
페이지 구조의 소스 코드를 참조하시기 바랍니다. 쿼리 호출은 맨 아래에 있습니다.
미리 도움을 주셔서 감사합니다. .
감사 @yytg을. 나는 이것을 기본 테스트로 설정하려고 노력했다. ** onSeek : function (event, i) {horizontal.eq (i) .data ("scrollable"). focus(); $ ("#slider") .slider ({value : 500}); } ** 어떤 성공도없이 움직이기 위해서는 고정 된 값을 선언해야합니다. –
예를 http://jsfiddle.net/에서 보여줍니다. – Yacov