如何每5秒钟旋转背景图片？ JavaScript的？

我不知道如何正确解释这一点，所以忍受着我...如何每5秒钟旋转背景图片？ JavaScript的？

我一直在寻找一个关于如何通过我的图像/背景文件夹旋转的答案，以便它改变我的背景每5秒，如果它也可以淡入淡出，也是一种奖励。我发现了一些类似的答案，但在尝试将其应用于我的页面时遇到了一些困难。

我不知道我应该提供什么样的信息，所以我只是要继续前进，并张贴我的第一个指数，然后我的样式表。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link rel="shortcut icon" href="images/favicon.ico" /> 
<link href="css/styler.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<!--Start Main Canvas--> 
<div class="maincanvas"> 



</div><!--End Main Canvas--> 
</body> 
</html>

我目前显示我的背景，我的“styler.css”样式表如下

.maincanvas { 
    background-image: url(../images/background/bg_image01.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
    height: auto; 
    left: 0px; 
    min-height: 100%; 
    min-width: 1100px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
}

我希望这是足够的信息，任何帮助，这将是非常美妙。谢谢！

来源

2012-12-30 Tom

恶意软件@KundanSinghChouhan –

This是一个旋转图像的例子，但它使用jQuery。

来源

2012-12-30 05:50:22 nebuch

这不是一个答案，把一些爱。 – Pavlo

你可以使用css关键帧来做这样的事情。

所以，你会设置关键帧，你需要浏览器前缀这些，一个快速的方法是使用http://prefixr.com。

@keyframes "bg" { 
0% { 
    background: url(link/to/image); 
} 
20% { 
    background: url(link/to/image); 
} 
40% { 
    background: url(link/to/image); 
} 
60% { 
    background: url(link/to/image); 
} 
80% { 
    background: url(link/to/image); 
} 
100% { 
    background: url(link/to/image); 
} 

}

然后设置动画（再次记住前缀）这样的事情。

animation: bg 25s 0 infinite ease;

所以5×5秒= 25秒总动画时间上的无限循环。

当然，这样做的缺点是您必须手动添加图片网址。

来源

2012-12-30 16:00:39

如何每5秒钟旋转背景图片？ JavaScript的？

回答

相关问题