带淡入淡出的图片随机切换仅生效一次，如何实现循环切换？

嘿，我明白你遇到的困扰了——你的代码现在只能完成一次图片切换，没法跟着淡入淡出效果循环起来。问题根源在于你只通过setTimeout触发了一次图片切换，而没有让它和遮罩的动画循环绑定在一起。咱们来调整代码，让两者同步循环：

修改后的完整代码 #

var imgs = new Array(
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg",
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg",
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg",
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg",
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg",
    "https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg"
);

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
}

function cycleBackground() {
    // 第一步：遮罩淡入（黑色覆盖）
    $('#overlay').animate({opacity: 1}, 1000, function() {
        // 淡入完成后切换背景图
        changeBg();
        // 第二步：遮罩淡出，完成后递归调用自身，开启下一轮循环
        $('#overlay').animate({opacity: 0}, 1000, cycleBackground);
    });
}

// 初始化遮罩状态为透明，然后启动循环
$('#overlay').css('opacity', 0);
cycleBackground();

关键改动说明 #

• 整合循环逻辑：把原来分开的遮罩动画和图片切换，整合成一个递归函数cycleBackground，确保每一步操作按顺序执行，完全同步。
• 利用动画回调：jQuery的animate方法支持回调函数，我们在遮罩淡入完成后切换图片，再在淡出完成后递归触发整个流程，实现无限循环。
• 移除独立定时器：原来的setInterval和setTimeout容易出现不同步的问题，递归调用更可靠，能保证动画和图片切换的节奏一致。
• 初始状态优化：启动前把遮罩设为透明，让第一次切换的过渡更自然。

这样修改后，就能实现和目标页面一样的效果：遮罩淡入→切换图片→遮罩淡出→自动进入下一轮循环，无限重复。

内容的提问来源于stack exchange，提问作者Steve Kess