.animate() 到达最后一张图片时如何停止？

Question

当我单击下一个按钮滑入下一个时，它会滑动并停止，最后一张图片在左侧，但这是我的问题。

第一个：我想在画廊右侧停止最后一张图片，所以它会用最后一张图片填充画廊，因为在我的代码中它会滑动所有最后一张图片并隐藏所有图片。

2nd：当我继续点击按钮到最后时，它继续滑动，因为它不会继续。

3rd：我想以正确的宽度滑动图像，我该如何编码？

这里是html代码

`` « 左上一页

 <button id="right">&raquo; right next</button>

 <div class="wrap">
 <div class="gallery">

 <div class="item">
 <img src="photos/1.jpg"  class="block" id="black">
 </div>


 <div class="item">
 <img src="photos/2.jpg"  class="block" id="black">
 </div>
 </div><!-- .gallery -->
  </div>  <!-- wrap -->

这里是我的 JQUERY

$("#right").click(function(){
    if($(".block:last").offset().left <= 0 ) 
         {return;}
    else { 
        $(".block").animate({
            left: "-=110px"
        } , "slow" );
    }
});


$("#left").click(function(){
     if($(".block").offset().left >= 0 ) 
        {return;}
     else { 
        $(".block").animate({
            left: "+=110px"
        } , "slow" );
    }
 });    

这是演示，但它在 jsfiddle 中无法正常运行，但在浏览器中运行。 http://jsfiddle.net/4bhL6p05/

Answer 1

我已经稍微改写了您的代码，以便它使用变量“current_pic”来跟踪您的幻灯片位置，而不是使用偏移量。我在代码中留下了一些cmets来解释一下。

JS/jQuery 代码：

<script>
    // it's always a good practice to wait until the document loads and then execute your js/jquery code
    $(document).ready(function() {
        // this variable keeps track of the current image displayed
        var current_pic = 0;
        // this variable is used to stop the slideshow at the last image
        var pic_count = $(".gallery > div").length;
        // my test images had a different width that your, so I used this variable to ensure that they get animated correctly
        // this works only if all the images have the same width
        var pic_width = $(".block").width();

        $("#right").click(function(){
            // if the expression was 'current_pic >= pic_count', the slideshow would slide past the last image and then stop
            // by decrementing 1 from the pic_count, you ensure that the slideshow stops at the last image
            if(current_pic >= pic_count-1) 
                {return;}
            else { 
                // the slideshow shifts one slide forward -> add 1 to current_pic
                current_pic++;
                $(".block").animate({
                    left: "-=" + pic_width
                } , "slow" );
            }
        });


        $("#left").click(function(){
            // this ensures that the slideshow doesn't shift past the first image
            if(current_pic <= 0) 
                {return;}
            else { 
                // the slideshow shifts one slide backwards -> decrement 1 from current_pic
                current_pic--;
                $(".block").animate({
                    left: "+=" + pic_width
                } , "slow" );
            }
        });
    });
</script>

CSS 代码：

<style>
    body {
        margin: 0px;
    }
    #black {
        height: 90px;
        position: relative;
    }
    .block {
        float: left;
    }
</style>

HTML 代码与您的小提琴中的相同

不要忘记包含 jQuery 库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

对于 jsfiddle，您需要添加 jQuery 作为依赖项（在左侧列中）。

关于你的问题：

我想在画廊右侧停止最后一张图片，所以它会用最后一张图片填充画廊，因为在我的代码中它会滑动所有最后一张图片并隐藏所有图片。

您需要从偏移中减去.gallery 元素的宽度，这样它就不会在屏幕外显示动画。像这样的：

var g = $('.gallery').width();

$("#right").click(function(){
    if(($(".block:last").offset().left - g) <= 0 ) {
        ... logic
    }

更新小提琴：http://jsfiddle.net/4bhL6p05/10/

---

编辑：这里有一个快速的解释！老实说，小提琴与您的原作没有太大区别。我唯一做的就是计算“结束”位置。首先，一张帮助可视化的图片：

每个黑框下方的紫色文字为left的偏移位置。

如您所见，当元素处于“起始”位置时，第一个元素的偏移量为 0。最后一个图像（在本例中）的偏移量为 400px（因为每个元素都是 100px）。

现在，当用户点击右键时，我们减去偏移量。如果我们检查偏移量 0，我们的最终图像将位于 STARTING 位置（最左侧）。这就是为什么在您的原始代码中，最终图像离开屏幕（但是，如果您检查元素，您会看到它只离开屏幕然后停止动画 - 它不会继续动画。）

我们希望最后一张图片位于右侧，因此我们需要计算“结束”偏移量。我们通过抓取容器的宽度并从中减去偏移量来得到它。

为了改进代码（或者，如果您想让最后一张图片与右侧“齐平”（类似于第一张图片的开始方式）），您可以计算最终图片、元素宽度和动画的距离。在此基础上，您可以改变动画数量。

希望这有助于解释更多。