Question

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

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

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

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

这是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

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

关于你的问题：

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

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

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

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

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

编辑：这是一个快速解释！老实说，这个小提琴与你的原作并没有太大的不同。我唯一做的就是计算“结束”位置。首先，有助于形象化的图像：

Explanation of what we're trying to do

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

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

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

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

改进代码（或者，如果你想让最后一个图像“刷新”右边（类似于第一个图像的开始）），你可以计算出最终图像，元素宽度和到动画的距离。基于此，您可以改变动画量。

希望这有助于解释它。

Answer 2

我稍微重写了你的代码，以便它使用变量'current_pic'来跟踪你的幻灯片位置，而不是使用偏移量。我在代码中留下了一些注释来解释它。

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>

如何到达最后一张照片时停止.animate（）？

2 个答案: