jQuery 滑块不能完美循环

Question

我的背景图片滑块目前有问题。它在第一次运行时工作得非常好，但第二次它在可见时将图片“碰撞”到右侧，而不是在不可见时这样做。我希望你们中的一些人会花时间研究这个。将不胜感激。

我正在使用的代码：

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;
  }
});

Answer 1

这里有一些需要改进的地方。希望这会给您一个良好的开端：

1. 目前，每次nextImage() 调用时，您都在 DOM 中搜索图像两次：

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

   搜索 DOM 的计算量很大，只有在必要时才应该这样做。相反，如果您需要一遍又一遍地处理相同的元素（就像处理图像一样），请选择它们一次，然后将它们存储在变量中以备后用。

2. 在以下几行中：

   $(this).animate({left: '-75px'}, 8000, 'linear')
   $(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show()
   $(this).css({left: '0px'})
   

   需要修复一些问题。首先，第 3 行删除了上一次传递留下的图像上的任何偏移。您希望此步骤位于步骤序列的开头（甚至在 fadeIn 之前），而不是在其效果将延迟的末尾。

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

   另外，请注意 fadeOut 首先将 duration 作为参数，然后是 complete 回调，即如果您希望淡出效果在 1200 毫秒内执行，您的调用应该是 fadeOut(1200, nextImage)。

   最后，jQuery 允许您使用chain functions，这将节省您对 jQuery 函数的几次调用。

3. 您应该在第一次点击后将removing 视为#logo 上的点击处理程序，以避免用户多次点击时出现意外行为。

4. 目前，您的图像以相反的顺序堆叠在一起。您需要使用 CSS 隐藏除第一个之外的所有内容。

5. 不要忘记分号并将您的函数命名为操作，即loadNextImage - 您的代码将更易于阅读。

这是一个包含所有更改的工作小提琴：http://jsfiddle.net/stiliyan/4bo0258p/（来自发布的一个 isherwood）

如果您想了解更多关于 jQuery 的最佳实践，我强烈推荐 CodeSchool 的 Try jQuery 课程。