javascript 如何每 5 秒更改一次背景

How to change background on every 5s

提问by Danka

I have image background.jpgas the background. Every 10s, how to load a new background background_n.jpgwhich stays for 100ms and then back to background.jpgand so on?

我有图像background.jpg作为背景。每 10 秒，如何加载一个新的背景background_n.jpg，保持 100 毫秒然后返回background.jpg等等？

采纳答案by Jose Faeti

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 10000);

}

回答by JMax

Here is an example (that does not need jQuery to work) :

这是一个示例（不需要 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;
}

回答by Niklas

Use setIntervaland setTimeout

使用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);

example: http://jsfiddle.net/niklasvh/M56A6/

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

回答by kapa

• You can use setTimeout(function, timeout)(plain Javascript function) to set a function(which you can define) to run after timeoutmilliseconds

  For example (the alert will be displayed after 10 seconds):

  setTimeout(function () {
       alert('I am running!');
  }, 10000);
  

• You can change an element's backgroundwith:

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

• Make sure you preload you background images before using them.

• I'd advise against using setInterval()for this (for such small intervals, it could stack up), use a chain of setTimeout()s to set up the repeating action.

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

  例如（警报将在 10 秒后显示）：

  setTimeout(function () {
       alert('I am running!');
  }, 10000);
  

• 您可以使用以下方法更改元素的背景：

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

• 确保在使用它们之前预先加载背景图像。

• 我建议不要setInterval()为此使用（对于这么小的间隔，它可能会叠加），使用setTimeout()s链来设置重复操作。

回答by Guffa

You can use setIntervalto run a function every n seconds, and setTimeoutfor the code that changes the background image back:

您可以使用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);

回答by Sachin R

Use javascript's setTimeout()function or jQuery

使用 javascript 的setTimeout()函数或 jQuery

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