限制div滑塊的寬度

Question

還沒有找到解決這個問題的方法，嘗試了一些東西... 我有一個滑塊腳本（在這裏找到：http://jsfiddle.net/ND7cf/）。工程很好，但我不能讓滑塊停止，當它在div框的末尾。你可以永遠滾動。 你能告訴我如何解決這個問題嗎？有沒有比這更好的解決方案？

謝謝！

Answer 1

代碼的快速修復： http://jsfiddle.net/G6x6L/10/

但是有很多關於jQuery的滑塊的解決方案。 我建議你使用一個： http://www.tripwiremagazine.com/2012/07/jquery-slider.html

Answer 2

我更新腳本http://jsfiddle.net/ND7cf/6/

Answer 3

您可以跟蹤點擊一個變量：another update。

在我的解決方案中，scrollTracker從1開始，單擊右增加，單擊左遞減。

$('#right-button').click(function() { 
scrollTracker++; 
... 
$('#left-button').click(function() { 
scrollTracker--; 

當你開始scrollTracker是1，你不希望顯示左滾動：「列」

scrollTracker > 1 ? leftButton.show() : leftButton.hide(); 

當您結束滾動，你在最大幀（totalFrames = $（你的情況）。長度），你躲右滾動：

scrollTracker < totalFrames ? rightButton.show() : rightButton.hide(); 

在開始時並在每次點擊時，您更新滾動條可見。

Answer 4

替換下面的代碼與你的js代碼，每個你將工作要求 updated fiddle

var margin_total= 0; 

$('#right-button').click(function() { 
if(margin_total > -900){ 
    $('#box').animate({ 
    marginLeft: "-=450" 
    }, "fast"); 
margin_total = margin_total - 450; 
    console.log(margin_total);} 
}); 

$('#left-button').click(function() { 
if(margin_total < 0){ 
    $('#box').animate({ 
    marginLeft: "+=450" 
    }, "fast"); 
margin_total = margin_total + 450; 
    console.log(margin_total);} 
}); 

Answer 5

我添加3個參數：CURREN-當前頁面; leftMax-max值，當您滾動到左側時; rightMax - 當您滾動到正確的最大值： 這是工作示例：

var leftMax=0; 
var rightMax=-2*450; 
var currrent=0; 
$('#right-button').click(function() { 
    currrent=currrent-450; 
    if(currrent<rightMax) currrent=rightMax; 
    $('#box').animate({ 
    marginLeft: currrent 
    }, "fast"); 
}); 
$('#left-button').click(function() { 
    currrent=currrent+450; 
    if(currrent>leftMax) currrent=leftMax; 
    $('#box').animate({  
    marginLeft: currrent 
    }, "fast"); 
});