在此 onClick Slider 中，最后一张幻灯片无需单击和动画即可转到第一张幻灯片答案

【问题标题】：In this onClick Slider last slide goes to first slide without clicking and animation在此 onClick Slider 中，最后一张幻灯片无需单击和动画即可转到第一张幻灯片
【发布时间】：2016-03-08 04:48:43
【问题描述】：

 $(document).ready(function(){
 //configerations
 var width = 720;
 var animationSpeed = 700;
 var currentSlide = 1;
 //DOM items
 var $slider = $('#slider');					//main sliding div
 var $slideContainer = $slider.find('.slides');	//ULs
 var $slides = $slideContainer.find('.slide');	// LIs
 
 
		$slider.click(function() {
			$slideContainer.animate({'margin-left': '-=720px'},animationSpeed, function() {
			currentSlide++;
			if (currentSlide == $slides.length) {
			currentSlide = 1;
			$slideContainer.css('margin-left', 0); }
			});
		});
 });

 #slider {width:720px; height:400px; overflow:hidden; float:left; border: 1px solid black;}
 #slider .slides {display: block; width:6000px; height:400px; margin:0; padding:0;}
 #slider .slide {float:left; list-style-type:none; width:720px; height:400px;}

 <div id="slider">
 <ul class="slides">
 <li class="slide">111</li>
 <li class="slide">222</li>
 <li class="slide">333</li>
 <li class="slide">444</li>
 <li class="slide">555</li>
 <li class="slide">666</li>
 </ul>
 </div>

在这个 onClick Slider 中，它可以正常工作到最后一张幻灯片，然后不点击就转到第一张幻灯片。

请参阅以下链接： Please see this Link to check the slider

【问题讨论】：

我认为将 if 子句从 currentSlide == $slides.length 更改为 currentSlide > $slides.length 应该可以解决您的问题。基本上，检查currentSlide 是否大于幻灯片数量，然后将currentSlide 设置为1 并将$slideContainer 的margin-left 设置为0。
感谢 Tahir，它现在可以正常工作了，但是从幻灯片 6 到 1，它的动画效果不正确。从幻灯片 6 动画到空白幻灯片，然后空白幻灯片在完成动画后立即更改为幻灯片 1。有什么解决办法吗？

标签： slider jquery-animate

【解决方案1】：

正如我在 cmets 中提到的，最初的问题是 $slideContainer 在 last 幻灯片激活后立即移动到 first 幻灯片（即 li包含666) 的元素可以通过简单地将原始if 条件从currentSlide == $slides.length 更改为currentSlide > $slides.length 来解决。

但是，正如您所注意到的，它仍然会突然跳到 first 幻灯片。要解决这个问题，您可能需要重新考虑应该如何为 $slideContainer 设置动画。

最初，我们在滑动动画完成后检查特定条件。但我的建议是在动画开始之前检查条件。

我想说的是，如果您将 JS 更改为如下所示，它应该会产生您想要的结果。

JavaScript：

$(document).ready(function() {
  var width = 720;
  var animationSpeed = 700;
  var currentSlide = 1;
  var prevSlide;
  var $slider = $('#slider');
  var $slideContainer = $slider.find('.slides');
  var $slides = $slideContainer.find('.slide');

  $slider.click(function() {
    prevSlide = currentSlide;
    if (prevSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.stop(true, true).animate({'margin-left': 0}, animationSpeed);
    } else {
        currentSlide += 1;
        $slideContainer.stop(true, true).animate({'margin-left': '-=720px'}, animationSpeed);
    }
  });
});

或者，查看 jsFiddle。如果上面的代码中有任何不清楚的地方，请告诉我。希望这会产生您想要的结果。

【讨论】：

再次感谢您的回复/帮助。在上面的最后一个代码中，当它转到幻灯片 6 时，然后 onClick 它会向后动画到幻灯片 1。这没关系。但是有没有可能，如果我点击幻灯片 6.. 它应该转到幻灯片 1，就像它从幻灯片 1 到 2 和 3 以及最多 6 的动画一样。我的意思是就像 1 是下一张幻灯片到 6？否则，上面的代码对我有用。
问题是，您正在为单个容器而不是单个较小的幻灯片制作动画。这个容器在不同的条件下左右移动。它不应该继续朝一个方向移动（如果你试着想象，这就是你所要求的）。
要真正实现您所寻找的，我想您将不得不以一种非常不同的方式来解决这个问题，您将制作单个幻灯片的动画，以便可以相互独立地移动一个。
Tahir，我发现这种方法完全符合我的要求：$(document).ready(function(){ $("#slider ul").each(function() { // 设置间隔为 10 秒 // var t = setInterval(function(){ $("#rightArrow").click(function(){ $("#slider ul").animate({marginLeft:- 360},1000,function(){ // 这段代码在动画完成后运行 $(this).find("li:last").after($(this).find("li:first")); / / 现在我们已经取出最左边的列表项，重新设置边距 $(this).css({marginLeft:0}); }) }); }); }); 问候

【解决方案2】：

以下方法正是我在上述问题中所寻找的：

$(document).ready(function(){

    $("#slider ul").each(function(){
        // Set the interval to be 10 seconds
    //  var t = setInterval(function(){
        $("#rightArrow").click(function(){
            $("#slider ul").animate({marginLeft:-360},1000,function(){
                // This code runs after the animation completes
                $(this).find("li:last").after($(this).find("li:first"));
                // Now we've taken out the left-most list item, reset the margin
                $(this).css({marginLeft:0});
            })
        });
    });
});

【讨论】：