一段时间后如何更改图像背景？答案

【问题标题】：How to change image-background after sometime?一段时间后如何更改图像背景？
【发布时间】：2011-06-16 18:59:18
【问题描述】：

大家好

我需要知道是否有办法在 10 秒或 30 秒等特定时间后更改背景图像。你知道像雅虎登录邮件“它每天都在改变背景！”

如果有使用 JQuery 或 CSS 或 html 或其他任何东西的方法，请告诉我

【问题讨论】：

【解决方案1】：

你可以用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>

试试这个！ :)

【讨论】：

【解决方案2】：

您可能可以使用 CSS3 webkit 动画来实现它，但要权衡的是它只能在 Chrome 和 Safari 之类的系统中工作，但您根本不需要任何 JavaScript。

我猜上面的 jQuery 建议是你最好的选择。

【讨论】：

【解决方案3】：

您可以使用 javascript 的 setTimeout 或 setInterval 来执行此操作，或查看 JQuery's Timers

编辑： 使用 JQuery，这将在 1 秒后改变背景：

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

【讨论】：

我真的很想用 JQuery 来解决这个问题，但是你能给我一个示例页面吗:(

【解决方案4】：

您可以使用函数和 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）

【讨论】：

【解决方案5】：

如果您使用的是Prototype 库：

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

【讨论】：