javascript – 如何使我的脚本循环

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

display: none;
}

#pics {
width:500px;
height:332px;
}


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


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


最佳答案
每个人都在回答这个问题,但没有解决问题.
当然,你可以在它周围放一个循环包装器(最好是一个不会终止的包装器),但为什么不直接编程呢？为什么要有所有硬编码时间,为什么不让它更强大？
尝试重写这样的代码.它可以更容易地修改您循环的图片：

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

这将花费适当的时间.它与你的略有不同,因为在另一个淡入之前,它会一直淡出.另一种方法是实际跳过fadeIn并保持淡出.这与你的外表更接近.

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

或者,制作一个非常小的fadein,以帮助减少新图像的闪烁：

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

最终编辑(真的！)
好的,为了使fadeIn和fadeOut同时可靠地工作,解决方案是不使用.我回去使用动画,而不是.因此,我必须完全重写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();
        }
    });
};

这样做是将序列移动到“show-> fadeIn and Out”而不是“淡入 – > show  – >淡出”.为了使你的过渡平滑,我只将其淡化为0.2而不是0.阶梯函数同时淡化另一个.一旦新的图片可见,我就完全隐藏了旧图片.
Here是它的工作小提琴.
javascript

javascript – 如何使我的脚本循环

相关文章