Javascript 如何设置滑块的上限，使“下一步”和“上一步”按钮不显示'；是否不将内容滚动到空白处？

我创建了一个示例来演示我的问题。如果你继续点击上一个和下一个，滑动条会一直滑动，甚至滑过内容

$('#next').click(function() {
          $('#sliderWrapper').animate({
            marginLeft: "-=200px"
          }, "fast");
       });
$('#prev').click(function() {
      $('#sliderWrapper').animate({
        marginLeft: "+=200px"
      }, "fast");
   });

我想我需要一个if语句，比如

if (current.width+totalScrolled < slider.width)
{
      $('#sliderWrapper').animate({
        marginLeft: "+=200px"
      }, "fast");
}
else
{
     [soemthing like set.scrollRight = max]
}

if（当前.width+totalScrolled

再次提醒你要跟踪你的位置，这样你就不会向后滚动太远

---

即使是一个让你回到起点的解决方案，也是解决这个问题的好方法。我只是在逻辑方面提供帮助。

以下是所需的if语句：

$('#next').click(function() {
    if($('#sliderWrapper').css("margin-left").replace("px", "")*-1 < $("#imageSlider").width()){
        $('#sliderWrapper').animate({
            marginLeft: "-=200px"
        }, "fast");
    }
});
$('#prev').click(function() {
    if($('#sliderWrapper').css("margin-left").replace("px", "") < 0){
        $('#sliderWrapper').animate({
            marginLeft: "+=200px"
        }, "fast");
    }
});

$（“#下一步”）。单击（函数（）{
if（$（'#sliderRapper'）.css（“左边距”）.replace（“px”，”）*-1<$（“#图像滑块”）.width（）{
$（“#SliderRapper”）。设置动画({
边缘左侧：“-=200px”
}“快”）；
}
});
$（'#prev'）。单击（函数（）{
if（$（'#sliderRapper'）.css（“左边距”）.replace（“px”，”）<0）{
$（“#SliderRapper”）。设置动画({
边缘左侧：“+=200px”
}“快”）；
}
});

---

我还对css做了一些改进。至少，我认为这些都是改进，可以忽略它们。我们可以找到答案。将滑块的宽度设置为anyting，我只是将其设置为400px进行测试。

嘿，感谢您的响应。不幸的是，它几乎不能完全正常工作！它只工作到某一点，然后将不允许我再滚动。我已经实施了您的解决方案。非常感谢您！比...更您的解决方案是更干净的代码，并且工作完美。我以前遇到过一个问题，我的固定位置“上一个”和“下一个”按钮会与另一个div重叠，这已经通过您布置它的方式修复了。我真的很感激这段时间。没问题，很有趣！我喜欢滑块。我希望你能在这个滑块上给我更多的帮助。我试图在点击按钮时让项目进入视图-。我是从你的帖子里（顺手）得到这个主意的。