Question

尚未找到解决此问题的方法，尝试了一些事情...... 我有一个滑块脚本（在这里找到它：http://jsfiddle.net/ND7cf/）。工作得很好，但我不能让滑块停止，当它在div框的末尾。你可以永远滚动。你能告诉我怎么解决这个问题吗？有比这更好的解决方案吗？

谢谢！

Answer 1

您可以使用变量跟踪点击次数：another update。

在我的解决方案中，scrollTracker从1开始，单击右增量，单击向左递减。

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

当你开始时，scrollTracker为1并且你不想显示左滚动：

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

当你结束滚动时，你的最大帧数（totalFrames = $（'。column'）。长度在你的情况下），你隐藏右滚动：

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

在开始时，每次单击时，都会更新滚动条可见性。

Answer 2

快速修复您的代码： http://jsfiddle.net/G6x6L/10/

但是jQuery有很多滑块解决方案。我建议你使用一个： http://www.tripwiremagazine.com/2012/07/jquery-slider.html

Answer 3

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

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-current page;滚动到左侧时，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");
});

限制div滑块的宽度

5 个答案: