如何在某段時間後更改圖像背景？

我需要知道是否有方法來改變背景圖像後，像10秒或30秒等特定時間...等。你知道像雅虎登錄郵件「它每天都在改變背景!!」

如果使用JQuery或CSS或HTML或任何其他事情的方式，請告訴我

2011-01-27 HAJJAJ

您可以用JavaScript函數

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript'> 
var imageID=0; 
function changeimage(every_seconds){ 
    //change the image 
    if(!imageID){ 
     document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg"; 
     imageID++; 
    } 
    else{if(imageID==1){ 
     document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg"; 
     imageID++; 
    }else{if(imageID==2){ 
     document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg"; 
     imageID=0; 
    }}} 
    //call same function again for x of seconds 
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000)); 
} 
</script> 
</head> 
<body style='background:black;' onload='changeimage(2)'> 
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div> 
</body></html>

讓它試試這個！ :)

來源

2011-01-27 19:32:09 FeRtoll

我是個沒有在JavaScript好是有這個例子的樣本頁面??? – HAJJAJ 2011-01-27 19:38:02

我編輯了答案...試試吧！ – FeRtoll 2011-01-27 19:47:15

你可以用功能的setTimeout做到這一點：

function changeBG() 
{ 
    var body = document.getElementsByTagName("body")[0]; 
    body.style.backgroundImage = "url(myimage.gif)"; 
    setTimeout("changeBG",30000); // Change every 30 seconds 
} 

window.onload = changeBG;

（未經測試，所以可能需要一個調整或2）

來源

2011-01-27 19:32:23

我不擅長在JavaScript中是否有這個例子的示例頁？ – HAJJAJ 2011-01-27 19:37:39

你可以使用JavaScript的setTimeout或setInterval要做到這一點，或考慮JQuery's Timers

編輯： 使用jQuery，這將在1秒後更改背景：

$(window).oneTime(1000, function() { 
    // change your background image here 
    });

來源

2011-01-27 19:32:30

您可以使用CSS3 webkit動畫來實現它，但是折衷是它只能用於Chrome和Safari之類，但根本不需要任何JavaScript。

上面的jQuery建議是我最好的選擇。

來源

2011-01-27 20:52:14 Steph

如果您使用的Prototype庫：

var changeBackground = function() { 
    $$('body').first().setStyle({ 
     backgroundImage: 'newImage.jpg' 
    }); 
}; 
changeBackground.delay(15);

來源

2011-01-27 20:59:15 JoJo

如何在某段時間後更改圖像背景？

回答

相關問題