如何每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的？

回答

相關問題