使用javascript减缓背景更改持续时间

我可以让我的网站标题在一定时间后改变它的背景，但当它闪烁的时候看起来不太好

是网站。是否需要更改操作的持续时间？我试着用css动画完成它，但结果是“背景：”不能像某些浏览器的“背景色：属性”那样工作。不管怎样，这是我的密码，你能给我一些建议吗。谢谢大家!

$(document).ready(function(){
var header = $('.header');

var backgrounds = new Array(
    'url("wp-content/themes/the-best-of-the-old-school/pics/header-bg.jpg")', 'url("wp-content/themes/the-best-of-the-old-school/pics/fire-bg.jpg")'
);

var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background', backgrounds[current]);
}

setInterval(nextBackground, 5000);

header.css('background', backgrounds[0]);

});

---

您可以在不同的CSS类中定义背景图像：

.bg-0 {
    background: url("wp-content/themes/the-best-of-the-old-school/pics/header-bg.jpg");
}
.bg-1 {
    background: url("wp-content/themes/the-best-of-the-old-school/pics/fire-bg.jpg");
}
...

然后仅切换标题上的不同类：

var backgrounds = [1,2,3,4,5,6];

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.removeClass("bg-"+(current-1)).addClass("bg-"+current);
}

这将确保无需进一步ado即可加载所有图像。当您第一次切换时，可能所有图像都将可用。Ofc这将在页面加载时加载所有图像，这意味着即使一个人可能不会停留足够长的时间来查看所有图像，他们仍然会加载这些图像。

您可以使用

替换这行代码

header.css('background', backgrounds[current]);

有以下几点

header.animate({opacity: 0}, 'slow', function() {
    $(this)
        .css({'background-image': backgrounds[current]})
        .animate({opacity: 1});
});

---

查看答案和

如果闪烁效应是由于加载时间造成的，则在显示当前图像时，应启动当前+1图像的预加载