jQuery滑块不能完美循环

jQuery slider doesn't loop perfectly

本文关键字：完美 循环 不能 jQuery      更新时间：2023-09-26

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

我正在使用的代码：

网页部分：

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

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

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

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

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

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

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

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

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

这是一个包含所有更改的工作小提琴：http://jsfiddle.net/stiliyan/4bo0258p/(从伊舍伍德发布的那个分叉(

如果你想学习更多关于jQuery的最佳实践，我强烈建议你去CodeSchool的Try jQuery课程。

相关文章：