如何每5秒旋轉一次背景圖像？ javascript？

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

這是旋轉圖像的示例，但是它使用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