淡入淡出10秒后

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

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

来源

2016-11-13 Erwin van der Bij

不知道，但也许CSS过渡期将工作？尝试给你的风格类添加一个'transition-duration：10s'。 – Quagaar

https://stackoverflow.com/questions/9483364/css3-background-image-transition – Alvaro

-1

不幸的是这是不可能设置为单个元素的背景两幅图像之间的过渡。（更正：通过对元素的背景图像属性进行动画处理 - 给定的浏览器支持）

但是，您可以淡出一个元素，而另一个元素隐藏它。

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

使用position:absolute, left, and top CSS属性设置img元素或div与bg图像的“堆栈”，位于彼此顶部。

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

当到达最后的元素时，再次淡出顶部图像。然后在第二个元素消失之前，剩下的元素就这样再次显现出来。

大约z索引的注意事项：CSS属性z索引将定位元素无论是在前方或后方的其它元件。因此，在每个项目的css类中设置正确的z索引是明智的，或者在加载页面时以编程方式设置。

图像尺寸注：如果图像或div的是不同的尺寸，你会褪色之一，而褪色对方开出。从这里我们可以谈论不同的淡入淡出的方法，但已经超出了本文的讨论范围

祝你好运:)

来源

2016-11-13 01:23:44

CSS和javascript都有可能转换同一个元素的背景图片。 – Damon

如果你可以提供一个例子，我会很高兴被证明是错误的:) –

添加了一个答案:) – Damon

淡入淡出10秒后

回答

相关问题