Javascript 如何在计时器上更改背景图像

我有一个简单的全屏背景图像，如下所示：

body {
 /* The background image used */
 background-image: url("../images/bg-one.jpg");

 /* Full height */
 height: 100vh; 
 width: 100vw;

 /* Hide scroll */
 overflow-x: hidden;
 overflow-y: hidden;

 /* Center and scale the background image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

我想知道如何通过淡入/淡出转换使背景图像每5秒改变一次。如果这看起来像是一个新手问题，很抱歉，但我刚刚开始学习Js/Jquery

我的第二个问题是，是否可以使用纯CSS3实现这一点，还是js/jquery工作得更好

非常感谢,，

---

Aidan

我使用jquery为您创建了一个测试用例：

使用纯js，您可以将jquery替换为 document.body.style.backgroundImage=“url”（“+a[i++]+”）”

具有fadein/out效应的背景变化测试用例：

---

您不能在

背景图像

上制作

淡入淡出

动画，因为无法为该心房设置动画。相反，您可以制作两个固定的图元，它们彼此重叠放置

---

在普通CSS中不能设置超时/间隔，必须使用JS。我使用了

setInterval

函数，该函数正在切换

.active

两个元素的状态，class

。active

通过

转换添加到元素
不透明度
-示例如下：
在这个和这个之间，我认为你可以找到一个解决方案。在这里寻找其他人的答案，他们问了一个类似的问题：你不能设置背景图像的动画（所以你不能使淡入淡出效果），但你可以在每个元素上设置两个元素（绝对位置）。纯CSS也不可能超时。