jquery - 限制 div 滑块的宽度

Question

还没有找到解决这个问题的方法，已经尝试了一些东西......我有一个滑块脚本（在这里找到它：http: //jsfiddle.net/ND7cf/）。效果很好，但是当它位于 div 框的末尾时，我无法让滑块停止。你可以永远滚动。你能告诉我如何解决这个问题吗？还有比这更好的解决方案吗？

谢谢！

Answer 1

您可以使用变量跟踪点击次数：另一个更新。

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

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

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

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

当你结束滚动时，你的最大帧（totalFrames = $('.column').length 在你的情况下），你隐藏右滚动：

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 代码替换下面的代码，并将根据您的要求 更新小提琴

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 个参数：当前页面；leftMax-向左滚动时的最大值；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");
});