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 part：

#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

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

目前，您每次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)之前不需要fadeOut()调用，因为animate()允许您提供一个动画完成后将调用的回调。在回调中提供您的fadeOut代码。

此外，请注意，fadeOut首先将duration作为参数，然后complete回调，即如果您想要淡出效果，则应调用fadeOut(1200, nextImage)执行超过1200毫秒。

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

这是一个有所有变化的工作小提琴：http://jsfiddle.net/stiliyan/4bo0258p/（从一个isherwood发布的分叉）

如果您想通过jQuery学习更多最佳实践，我强烈推荐CodeSchool的Try jQuery课程。

jQuery滑块不能完美循环

1 个答案: