Javascript 淡入新背景，10秒后淡出

我试图让我的网站每10秒改变一次背景。这是成功的。现在，我想让它们淡入淡出，这样它们就会平滑地出现。我搜索了其他页面，找到了相关的问题，但我不能很好地理解答案

Javascript:

function run(interval, frames) {
var int = 1;

function func() {
    document.body.id = "b"+int;
    int++;
    if(int === frames) { int = 1; }
}

var swap = window.setInterval(func, interval);
}

run(10000, 6); //milliseconds, frames

CSS:

---

不幸的是，不可能在设置为单个元素背景的两个图像之间转换。更正：在给定浏览器支持的情况下，通过设置元素的“背景图像”属性的动画来实现

但是，可以淡出一个元素，而另一个元素位于其后面

Jquery有一个名为.fadeToggle的方法，您可以在本例中使用该方法

设置一个包含bg图像的img元素或div堆栈，放置在彼此的顶部，位置为：绝对、左侧和顶部CSS属性

然后，在javascript循环中，每10秒，.fade切换当前可见的div，显示下一个图像。您可以使用索引变量跟踪状态

到达最终元素后，再次淡入顶部图像。然后，在第二个元素消失之前，.显示其余元素，以便再次显示

关于z-index的注意事项：CSS属性z-index将把元素放在其他元素的前面或后面。因此，明智的做法是在css类中或在加载页面时以编程方式为每个项设置正确的z索引

图像大小注意：如果图像或div是不同的尺寸，则会淡入一个，而淡出另一个。从这里我们可以讨论不同的交叉衰落方法，但这超出了本文讨论的范围

---

祝你好运：

不确定，但CSS转换持续时间是否可行？尝试为样式类添加转换持续时间：10。CSS和javascript都可以转换同一元素的背景图像。如果您能提供一个示例，我很高兴被证明是错误的：添加了一个答案：

#b1 { background-image: url("standaard01.jpg"); }
#b2 { background-image: url("standaard02.jpg"); }
#b3 { background-image: url("standaard03.jpg"); }
#b4 { background-image: url("standaard04.jpg"); }
#b5 { background-image: url("standaard05.jpg"); }
#b6 { background-image: url("standaard06.jpg"); }
#b7 { background-image: url("standaard07.jpg"); }
#b8 { background-image: url("standaard08.jpg"); }
#b9 { background-image: url("standaard09.jpg"); }
#b10 {  background-image: url("standaard10.jpg"); }