Question

我不确定如何正确解释这一点，所以请耐心等待......

我一直在寻找一个关于如何旋转我的图像/背景文件夹的答案，这样它每隔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%;
 }

我希望有足够的信息，对此的任何帮助都会很棒。谢谢！

Answer 1

你可以使用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 x 5s = 25s无限循环的总动画时间。

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

Answer 2

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

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

2 个答案: