javascript - 淡入新背景并在 10 秒后淡出

Question

我试图让我的网站每 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:

#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"); }

Answer 1

遗憾的是，无法在设置为单个元素背景的两个图像之间进行转换。 (更正:是的，通过动画元素的背景图像属性 - 给定浏览器支持)

但是，您可以使一个元素淡出，而另一个元素位于它后面。

Jquery 有一个名为 .fadeToggle() 的方法，您可以在这种情况下使用它。

使用 position:absolute, left, and top CSS 属性设置一个 img 元素或带有 bg 图像的 div 的“堆栈”，放置在彼此的顶部。

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

到达最后一个元素后，再次淡化顶部图像。然后在第二个元素消失之前，.show() 剩余的元素，以便它们再次可见以进行显示。

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

图片大小注意事项:如果图片或 div 的尺寸不同，您将淡入一个，同时淡出另一个。从这里我们可以讨论不同的交叉渐变方法，但这超出了本次讨论的范围

祝你好运:)