setInterval 一个图像函数

Question

我有这段代码，可以在更改随机生成的图像时将淡入和淡出效果设置为黑色：

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 changeOverlay() {
    $('#overlay').animate({opacity: 1,}, 1000);
    $('#overlay').animate({opacity: 0,}, 1000);
}
setTimeout(
  function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
  }, 3000);
function changeBackgroundSmoothly() {
    $('#masthead').animate(0, changeBg);
}
setInterval(changeOverlay,2000);
setInterval(changeBackgroundSmoothly,2000);

问题是，图像只在第一次旋转，如何让它像#overlay一样循环？

你可以在这里有一个视觉想法：https://store.vtxfactory.org

谢谢。

Answer 1

您可以在控制台中看到引用错误。

首先更改设置超时方法

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