如何使我的脚本循环

Question

我创建了一个以一个图像结束的图像滑块,但现在我想更进一步,让它循环.

这是头标记中的代码

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

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

Answer 1

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

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

尝试像这样重写你的代码。它使修改循环浏览的图片变得更加容易：

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

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

最终编辑（真的！）

好吧，为了让 fadeIn 和 fadeOut 同时可靠地工作，解决方案是两者都不使用。我又继续使用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。step 函数是同时淡入另一个的函数。一旦新照片可见，我就完全隐藏旧照片。

这是它的工作小提琴。