我创建了一个在一张图片上结束的图片 slider ，但现在我想更进一步，让它循环播放。

这是我在 head 标签中的代码

<style>
#picOne, #picTwo, #picThree, #picFour, #picFive{
position:absolute;
display: none;
}

#pics {
width:500px;
height:332px;
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
});
</script>

这是它在正文代码中实现的地方

<div id="pics">
<center>
<img src="img/dolllay.jpg" width="500" height="332" id="picFive" />
<img src="img/dye.jpg" width="500" height="332" id="picTwo" />
<img src="img/dollsit.jpg" width="500" height="332" id="picThree" />
<img src="img/heirloom.jpg" width="500" height="332" id="picFour" />
<img src="img/heritage.jpg" width="500" height="332" id="picOne" />
</center>
</div>

我可以把它变成一个函数然后循环吗？我可以获得任何指导吗？非常感谢

最佳答案

每个人都在回答问题，但没有解决问题。

当然，您可以在它周围放置一个循环包装器(最好是一个不会终止的包装器)，但为什么不直接对其进行编程呢？为什么所有的时间都硬编码，为什么不让它更健壮？

尝试像这样重写您的代码。它使修改循环遍历的图片变得更加容易:

var pictures = ["picOne", "picTwo", "picThree", "picFour", "picFive"];
var index = 0;

var displayImage = function() {
    if (index == pictures.length) { return; }

    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

displayImage();

然后，如果你想循环回来，你只需调整 displayImage 函数:

var displayImage = function() {
    if (index == pictures.length) { index = 0; }
    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

TRY IT 在 jsfiddle

编辑

在仔细阅读您的问题后，我发现我原来的答案并没有完全满足您的需求。您已将其设置为每五秒，一个将淡出，另一个将淡入。目前，我的需要 6.5 秒，因为我的所有操作都是按顺序而不是同时进行的。要使其接近匹配您的，只需将 1500s 更改为 750s:

    $("#" + pictures[index++]).fadeIn(750).delay(3500).fadeOut(750, displayImage);

这需要适当的时间。它与您的略有不同，其中一个在另一个淡入之前一直淡出。另一种方法是实际跳过淡入并保持淡出。这更接近您的外观。

    $("#" + pictures[index++]).show().delay(3500).fadeOut(1500, displayImage);

或者，制作一个非常小的淡入淡出，以帮助减少新图像的闪光:

    $("#" + pictures[index++]).fadeIn(100).delay(3500).fadeOut(1400, displayImage);

最终编辑(真的!)

好的，要让淡入淡出和淡入淡出同时可靠地工作，解决方案是两者都不使用。我转而使用 animate。结果，我不得不完全重写 displayImage 函数，但这正是您所需要的:

var displayImage = function () {
    if (index == pictures.length) {
        index = 0;
    }

    $("#" + pictures[index]).show().delay(3500).animate({
        opacity: 0.2
    }, {
        step: function (now) {
            var idx = (index + 1) % pictures.length;
            var val = 1.2 - now;
            $("#" + pictures[idx]).show().css("opacity", val);
        },
        complete: function () {
            $("#" + pictures[index++]).hide();
            displayImage();
        }
    });
};

这样做是将序列移动到“显示->淡入淡出”而不是“淡入 -> 显示 -> 淡出”。为了使过渡平滑，我只将它淡出到 0.2 而不是 0。步进函数是同时淡出另一个的函数。一旦新图片可见，我就会完全隐藏旧图片。

Here是它的工作 fiddle 。

关于javascript - 如何让我的脚本循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17150032/