2011-09-19 93 views
1

我有一個jQuery滑塊,單擊下一個按鈕時水平滑動。但是,當它到達圖像/列表序列的末尾時,它會繼續滑動並且不會停止。我設法讓它不從左端滑落,但右端是一個問題。jquery滑塊不會停止在最後

$(document).ready(function(){ 



$("#inner").css("overflow-x", "hidden"); 

var xPos = $('#scroller li:last').position(); 
var pos = '-' + xPos.left + 'px'; 
alert(pos); 



$('#next').click(function(){ 

if(("#scroller ").css("margin-left") > pos){ 



    $('#scroller').animate({ 

      marginLeft: "-=133px" 



    }, 200) 





} 


}); 


$('#prev').click(function(){ 

    if($("#scroller").css("margin-left") < "0"){ 

     $('#scroller').animate({ 

      marginLeft: "+=133px" 



    }, 200) 


    } 
}); 

});

+1

沒有什麼能讓它停下來。您的下一個按鈕每次只增加一個133邊距。您需要以某種方式設置最大邊距,或者甚至更好,在達到一定邊距後使右/左按鈕消失。如果我有時間,我會研究一種方式,稍後發佈答案。但這就是你應該射擊的。 – alt

+0

我試圖告訴它不會移動,除非margin-left的值大於滑塊內最後一個元素的位置。 – evan

回答

1

首先,你必須在該行的錯誤:

if(("#scroller ").css("margin-left") > pos){ 

將其更改爲

if($("#scroller ").css("margin-left") > pos){ 

如果它不幫助,也許你應該試試這個:

if(parseInt($("#scroller").css("margin-left"),0) < 0){ 

將它改爲$('#prev')。click function,並且

if(parseInt($("#scroller ").css("margin-left"),10) > parseInt(pos,10)){ 

in $('#next')。點擊功能