现有切换随机图片代码仅生效一次，如何实现与#overlay同步循环？

我看了你的代码，问题主要出在函数作用域、animate方法的错误使用，以及定时器的逻辑配合上。咱们一步步来修正：

问题分析 #

• changeBg函数被定义在setTimeout的回调函数内部，外部的changeBackgroundSmoothly根本无法正确调用它，这是导致图片只切换一次的核心原因之一。
• $('#masthead').animate(0, changeBg);写法错误，animate的第一个参数必须是要动画的样式对象，而不是数字0。
• 两个setInterval同时运行，时序没有对齐，导致图片切换和遮罩层动画没有同步配合。

修正后的代码 #

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 changeBackgroundSmoothly() {
    // 先让遮罩层淡入（变成黑色）
    $('#overlay').animate({opacity: 1}, 1000, function() {
        // 遮罩层完全显示后，切换背景图片
        changeBg();
        // 然后让遮罩层淡出，显示新的背景图
        $('#overlay').animate({opacity: 0}, 1000);
    });
}

// 初始化：先显示一张随机图片，然后启动循环
changeBg();
// 每2000ms执行一次平滑切换（刚好和动画时长匹配）
setInterval(changeBackgroundSmoothly, 2000);

关键改进点 #

1. 调整函数作用域：把changeBg独立出来，让其他函数可以正常调用它。
2. 同步动画时序：利用animate的回调函数，确保遮罩层完全淡入后再切换图片，然后再淡出遮罩层，形成连贯的淡入淡出效果。
3. 简化定时器逻辑：只保留一个setInterval来控制整个切换流程，避免多个定时器冲突。
4. 初始化图片：页面加载时先调用一次changeBg，确保一开始就有随机背景图。

这样修改后，背景图片就能和遮罩层动画同步，循环切换了。

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