Javascript 一段时间后如何更改图像背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4820853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change image-background after sometime?
提问by HAJJAJ
HI everybody
大家好
i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec...etc. you know like yahoo Login mail "it's changing the background daily!!"
我需要知道是否有办法在 10 秒或 30 秒等特定时间后更改背景图像...等。你知道像雅虎登录邮件“它每天都在改变背景！！”
if there is a way using JQuery or CSS or html or any other thing ,please tell me
如果有使用 JQuery 或 CSS 或 html 或任何其他东西的方法，请告诉我
回答by FeRtoll
you can make it with javascript function
你可以用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>
try this one! :)
试试这个！:)
回答by Steph
You could probably achieve it using CSS3 webkit animations but the trade off is it will only work in the likes of Chrome and Safari but you won't require any JavaScript at all.
您可能可以使用 CSS3 webkit 动画来实现它，但代价是它只能在 Chrome 和 Safari 之类的环境中工作，而您根本不需要任何 JavaScript。
The jQuery suggestion above is your best bet here I guess.
我猜上面的 jQuery 建议是您最好的选择。
回答by Mark Avenius
You could use javascript's setTimeoutor setIntervalto do this, or look into JQuery's Timers
您可以使用 javascript 的setTimeout或setInterval来执行此操作，或者查看JQuery 的计时器
EDIT:With JQuery, this will change the background after 1 sec:
编辑：使用 JQuery，这将在 1 秒后改变背景：
$(window).oneTime(1000, function() {
// change your background image here
});
回答by Joel Etherton
You could do it with a function and setTimeout:
你可以用一个函数和 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;
(untested so it might need a tweak or 2)
（未经测试，因此可能需要调整或 2）
