如何每5秒旋转一次背景图像？ javascript？

Question

I'm not sure how to explain this properly, so bear with me... 我不确定如何正确解释这一点，所以请耐心等待...

I've been searching for an answer on how to rotate through my images/background folder so that it changes my background every 5 seconds, also it would be a bonus if it could fade in and out as well. 我一直在寻找有关如何在图像/背景文件夹中旋转的答案，以便它每5秒更改一次背景，如果它也可以淡入和淡出，那将是一个好处。 I found a few similar answers but am experiencing some difficulty trying to adapt it to my page. 我找到了一些类似的答案，但是在尝试使其适应我的页面时遇到了一些困难。

I'm not sure what information I should be providing, so I'm just going to go ahead and post my index first followed by my style sheet. 我不确定应该提供什么信息，所以我将继续进行操作，首先发布索引，然后发布样式表。

<!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>

I'm currently displaying my background in my "styler.css" style sheet as follows 我目前正在“ 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%;
 }

I hope that's enough information, any help with this would be fantastic. 我希望有足够的信息，对此的任何帮助都将是很棒的。 Thank you! 谢谢！

Answer 1

You could use css keyframes to do such a thing. 您可以使用css关键帧执行此操作。

So you would set the keyframes, you would need to browser prefix these, a quick way would be to use http://prefixr.com . 因此，您将设置关键帧，您需要在浏览器上添加前缀，快速的方法是使用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);
 }

}

Then set up the animation (again remember to prefix) something like this. 然后设置类似这样的动画（再次记住要加上前缀）。

animation: bg 25s 0 infinite ease;

So 5 x 5s = 25s total animation time on an infinite loop. 因此，无限循环中5 x 5s = 25s的总动画时间。

Of course the downside to this is that you would have to manually add the image urls. 当然，这样做的缺点是您必须手动添加图像网址。

Answer 2

这是旋转图像的示例，但是它使用jQuery。

如何每5秒旋转一次背景图像？ javascript？

问题描述

2 个解决方案

解决方案1
1 2012-12-30 16:00:39

解决方案2
-1 2012-12-30 05:50:22

如何每5秒旋转一次背景图像？ javascript？

问题描述

2 个解决方案

解决方案1 1 2012-12-30 16:00:39

解决方案2 -1 2012-12-30 05:50:22

解决方案1
1 2012-12-30 16:00:39

解决方案2
-1 2012-12-30 05:50:22