2011-11-18 3 views
0

Jquery에서 left_arrow 및 right_arrow div로 구성된 기본 슬라이더가 있습니다. 둘 다 긴 .png가 포함 된 #screens div의 '왼쪽'값을 제어합니다. 각 화면의 너비는 543 픽셀입니다.Jquery에서 .animate의 경계 설정

$pr('#arrow_left').click(function() { 
    $pr('#screens').animate ({"left": "+=543px"}, "fast"); 
}); 
$pr('#arrow_right').click(function() { 
    $pr('#screens').animate ({"left": "-=543px"}, "fast"); 
}); 

슬라이드 동작은 잘 작동하지만 화살표는 어느 한 방향으로 화상을 넘어 사용자하지 않도록 #screens '왼쪽'값에 대한 최소 및 최대 값을 설정하려는.

+0

은 오버플로가있는 고정 폭 div 안에 포함 된 화면 div입니다. 숨김? – dSquared

답변

2
var max = 543 * 10; //10 slides, for example 
var current = 0; 
$pr('#arrow_left').click(function() { 
    if(current < 0) 
    { 
     current += 543; 
     $pr('#screens').animate ({"left": current + "px"}, "fast"); }); 

    } 
}); 

$pr('#arrow_right').click(function() { 
    if(current > max) 
    { 
     current -= 543; 
     $pr('#screens').animate ({"left": current + "px"}, "fast"); 

    } 
}); 
+0

이 솔루션은 또한 왼쪽 클릭 할 때마다 새로운 "오른쪽"클릭 이벤트를 바인딩하는 문제를 해결하여 예기치 않은 동작이 발생할 수 있습니다. – Dave

+0

var max는 전체 슬라이드를 나타내야하는데, dom에 쓰여지는 경우 jQuery를 통해 쉽게 수집 할 수 있습니다. –

0

이 슬라이더는 정도가 얼마나 많은 직접 아이 <div>의에 따라 변경 있도록 카이 청나라의 대답은 멋진 :) 난 내 자신의 필요에 그것의 변화를 만들고, 최대 변수 jQuery를 추가입니다 결코이 설정되어 일단 :) 누군가가 그것을 필요로 넣다

난 그냥 여기에 코드를 떠날거야 편집 할 필요가 없습니다 : P

$(document).ready(function(){ 
var max = 275 * $('.slider-wrap > div').length; //change div to whatever element wraps each individual piece of content you're sliding. 
var current = 0; 
$('.left').click(function() { 
if(current < max){ 
    alert(current); 
    current += 275; 
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    } 
}); 
$('.right').click(function() { 
if(current > 0){ 
    alert(current); 
    current -= 275; 
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    } 
}); 

});

관련 문제