Question

我是jQuery的新手，我刚刚完成了这项任务，其中包括使用带有abosolute定位的div创建一种滑块。

我刚创建了一个包含4张图片的div gallery。 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 px，因为我只有4张图片）停止动画”。

我尝试了很多选项，而且我整个星期都在搜索，但我想这里语法一定有问题，或者我得不到什么。社区可以帮我正确实现吗？

Answer 1

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

$("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++;
        }
    });
});

Answer 2

您可以获取left的{{1}}，或将变量计数存储在#gallery中读取CSS属性的方法是css()

通过限制像素来停止后向div动画？

2 个答案: