如何每 5 秒更换一次背景答案

【问题标题】：How to change background on every 5s如何每 5 秒更换一次背景
【发布时间】：2011-06-22 13:49:01
【问题描述】：

我有图像background.jpg 作为背景。每隔 10s，如何加载一个新的背景background_n.jpg，停留 100ms，然后返回到background.jpg 等等？

【问题讨论】：

这不是癫痫发作的间隔吗？？

【解决方案1】：

这是一个示例（不需要 jQuery 即可工作）：

var rotate = false;
function setbackground(){
  window.setTimeout( "setbackground()", 5000);
  newImage = rotate ? 'url(pict1.jpg)' : 'url(pict2.jpg)';
  rotate = !rotate;
  document.getElementById('change').style.backgroundImage = newImage;
}

【讨论】：

【解决方案2】：

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 10000);

}

【讨论】：

【解决方案3】：

使用setInterval 和setTimeout

window.setInterval(function(){    
   window.setTimeout(function(){
       $('div').css('background-image','url(background.jpg)');
   },100);
    $('div').css('background-image','url(background_n.jpg)');
},10000);

示例：http://jsfiddle.net/niklasvh/M56A6/

【讨论】：

【解决方案4】：

您可以使用setTimeout(function, timeout)（纯Javascript函数）设置function（您可以定义）在timeout毫秒后运行

例如（10秒后会显示警报）：
```
setTimeout(function () {
     alert('I am running!');
}, 10000);
```

您可以change an element's background 使用：

$(element).css('background-image', 'url(xy.jpg)')

确保在使用前预加载背景图片。
我建议不要为此使用setInterval()（对于如此小的间隔，它可能会叠加），使用setTimeout()s 链来设置重复动作。
李>

【讨论】：

【解决方案5】：

您可以使用setInterval 每 n 秒运行一次函数，setTimeout 用于将背景图像更改回的代码：

window.setInterval(function(){
  $('body').css('backgroundImage', 'url(background_n.jpg)');
  window.setTimeout(function(){
    $('body').css('backgroundImage', 'url(background.jpg)');
  }, 100);
}, 10 * 1000);

【讨论】：

【解决方案6】：

使用javascript的setTimeout()函数要么 jQuery

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

【讨论】：