Jquery 是否通过限制像素来停止前后向div动画？

我是jQuery的新手，我刚刚接受了一项任务，任务是使用一个div创建一种滑块，其中包含

abosolute

定位

我刚刚创建了一个包含4张图片的div

gallery

<代码>图库（绝对位置）位于与图片大小相同的另一个div（相对位置）内。然后我有两个按钮“后退”和“前进”

这是我迄今为止的代码：

$("document").ready(function() {
    $("#back").click(function() {
        $("#gallery").animate({"left": "+=104px"}, "slow");
    });

    $("#forward").click(function() {
        $("#gallery").animate({"left": "-=104px"}, "slow");
    });
});

这很简单，但效果很好

因此，每当我点击“后退”或“前进”时，

gallery

都会通过增加或减少它的左侧位置移动像素的确切数量，即

gallery

中每张照片的宽度

问题是它一直在这样做，我希望它能够实现，一旦它到达最后一张照片或第一张照片，动画就会停止

我知道应该有一个条件，一个

if

语句，它说“如果它增加/减少这么多（比如416像素，因为我只有4张图片），停止动画”

---

我尝试了很多选择，整个星期我都在搜索，但我想一定是语法有问题，或者是我没有得到的任何东西。社区能否帮助我正确地实现这一点？

添加一个跟踪当前幻灯片的变量

$("document").ready(function(){
    var counter = 1;

    $("#back").click(function() {
        if( counter > 1 ) {
            $("#gallery").animate({"left": "+=104px"}, "slow");
            counter--;
        }
    });
    $("#forward").click(function(){
        if( counter < 4 ) {
            $("#gallery").animate({"left": "-=104px"}, "slow");
            counter++;
        }
    });
});

$（“文档”）.ready（函数（）{
var计数器=1；
$（“#返回”）。单击（函数（）{
如果（计数器>1）{
$（“#gallery”）.animate（{“left”：“+=104px”}，“slow”）；
计数器--；
}
});
$（“#转发”）。单击（函数（）{
如果（计数器<4）{
$（“#gallery”）.animate（{“left”：“-=104px”}，“slow”）；
计数器++；
}
});
});

您可以在

#gallery

的

左侧

，或者在

#gallery

中存储变量计数

---

阅读CSS属性的方法是

非常感谢！这正是我要找的！