javascript - jQuery slider 不能完美循环

Question

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

我正在使用的代码:

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. 目前，您正在 DOM 中搜索图像两次，每个 nextImage()调用:

   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 之前)，而不是在其效果将被延迟的末尾。

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

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

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

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

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

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

这是一个包含所有更改的工作 fiddle :http://jsfiddle.net/stiliyan/4bo0258p/ (从伊舍伍德发布的一篇文章中 fork 出来)

如果您想了解更多 jQuery 最佳实践，我强烈推荐 Try jQuery CodeSchool 的类(class)。