jQuery滑块不能完美循环

我目前有一个问题，我的背景图像滑块。它在第一次运行时效果很好，但第二次在可见时将图片“颠簸”到右侧，而不是在不可见时这样做。我希望你们中的一些人花时间研究这一点。将不胜感激。jQuery滑块不能完美循环

我正在使用的代码：

HTML的一部分：

<div id="logo"> 
    <img src="images/5.jpg"> 
    <img src="images/6.jpg"> 
    <img src="images/7.jpg"> 
    <img src="images/8.jpg"> 
    <img src="images/9.jpg"> 
    <img src="images/10.jpg"> 
    <img src="images/11.jpg"> 
</div>

CSS部分：

#logo img { 
    min-height: 100%; 
    width:110%; 
    height: 100%; 
    position: fixed; 
    top:0px; 
    left: 0px; 
}

的JavaScript：

var slideshow = 0; 
var currentImageIndex = 0; 

var nextImage = function() { 
    var $imgs = $('#logo > img'); 
    currentImageIndex++; 

    if (currentImageIndex > $imgs.length) { 
     currentImageIndex = 1; 
    } 

    $('#logo > img:nth-child(' + currentImageIndex + ')') 
     .fadeIn(function() { //.fadeIn() .show() 

     $(this).animate({ 
      left: '-75px' 
     }, 8000, 'linear') 

     $(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show() 

     $(this).css({ 
      left: '0px' 
     }) 
    }) 
};

，并点击时，它的触发：

$(".hexagoncontainer7").click(function() { 
    if (slideshow == 0) { 
    nextImage(); 
    slideshow=1; 
    } 
});

来源

2014-09-29 Dion

我现在没时间了，但这里是一个起点小提琴：http://jsfiddle.net/isherwood/3aaLa976 – isherwood 2014-09-29 21:33:42

这里有几件事要改进。希望这会给你一个良好的开端：

目前，你在每个nextImage()调用搜索您的图片DOM两次：

var $imgs = $('#logo > img');和$('#logo > img:nth-child(' + currentImageIndex + ')')。

搜索DOM在计算上花费很大，只有在必要时才应该这样做。相反，如果您需要一次又一次地处理相同的元素（就像处理图像一样），请选择一次，然后将它们存储在变量中供以后使用。
在下面几行：
```
$(this).animate({left: '-75px'}, 8000, 'linear') 
$(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show() 
$(this).css({left: '0px'}) 
```
几件事情需要加以固定。首先，第3行删除上一遍遗留的图像上的任何偏移量。在步骤顺序的开始处（即使在fadeIn之前），您需要执行此步骤，而不是在其结果延迟的末尾。

接下来，您不需要在之前调用delay(100)，因为animate()可以让您提供回调，该回调将在动画完成后调用。在回调中提供您的淡出输出代码。

另外，注意fadeOut首先需要duration作为参数，则回调complete，即你的电话应该是fadeOut(1200, nextImage)如果你想淡出效果执行超过1200毫秒。

最后，jQuery让你chain functions，这将节省你几个对jQuery函数的调用。
在第一次点击后，您应该考虑removing#logo上的点击处理程序，以避免用户单击多次时出现意外行为。
当前您的图像以相反的顺序堆叠在一起。你需要用CSS隐藏除第一个之外的所有内容。
不要忘记分号并将您的功能命名为动作，即loadNextImage - 您的代码将更易于阅读。

这里是一个工作拨弄着所有的变化：http://jsfiddle.net/stiliyan/4bo0258p/（从一个伊舍伍德叉贴）

如果你想学习使用jQuery更多最佳实践我的CodeSchool强烈推荐Try jQuery课程。

来源

2014-09-29 23:51:13 Stiliyan

谢谢，帮了很多！我想了解更多关于jQuery ofcourse的知识，并且我已经在前一段时间尝试了jQuery课程。我现在知道了解决问题的方法，但并非最佳。我想这只是时间和练习的问题。 – Dion 2014-09-30 08:01:23

jQuery滑块不能完美循环

回答

相关问题