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

不幸的是，无法在设置为单个元素背景的两个图像之间进行转换。（更正：通过动画元素的background-image属性 - 给定浏览器支持）

但是，你可以将一个元素淡出而另一个元素放在它后面。

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

使用position:absolute, left, and top CSS属性设置img元素或带有bg图像的div的“堆叠”，位于彼此之上。

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

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

关于z-index的注释：CSS属性z-index将元素放在前面或后面的元素后面。因此，在每个项目的css类中设置正确的z-index，或者在加载页面时以编程方式设置正确的z-index是明智的。

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

祝你好运：）

淡出新背景，10点后消失

1 个答案: