Question

我以图片background.jpg为背景。每隔10秒，如何加载一个新的背景background_n.jpg，然后停留100毫秒，然后再回到background.jpg，依此类推？

Answer 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;
}

此致

最高

Answer 2

使用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/

Answer 3

您可以使用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()链来设置重复动作。

Answer 4

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 10000);

}

Answer 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);

Answer 6

使用javascript的setTimeout()功能要么 jQuery的

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

如何改变每5秒的背景

6 个答案: