JavaScript动态淡入背景图像

我正在尝试以5秒的间隔从5个图像动态更改应用程序的背景图像，然后重复

以下是我的JS代码：

<script type="text/javascript">
  $(function() {
    var body = $('body');
    var backgrounds = new Array(
      'url(img/bg/bk.jpg)',
      'url(img/bg/nb.jpg)',
      'url(img/bg/la.jpg)',
      'url(img/bg/ts.jpg)',
      'url(img/bg/bh.jpg)'
    );
    var current = 0;
    function nextBackground() {
      body.css(
        'background',
        backgrounds[current = ++current % backgrounds.length]
      );
      setTimeout(nextBackground, 5000);
    }
    setTimeout(nextBackground, 5000);
    body.css('background', backgrounds[0]);
  });
</script>

但它不起作用。甚至背景也是白色的。

没有任何属性。

你的剧本写得很好，我只想改变几件事：

CSS:

jQuery：

$(function() {
  var body = $('body');
  var backgrounds = [
    '//placehold.it/800x600/cf5&text=1', // no need to `url(` here
    '//placehold.it/800x600/f1f&text=2',
    '//placehold.it/800x600/333&text=3',
    '//placehold.it/800x600/0f0&text=4',
    '//placehold.it/800x600/70f&text=5'
  ];
  var current = 0;

  // Preload all images // Prevent (if possible) white gaps between image load
  for(var i=0; i<backgrounds.length; i++){
    var img = new Image();
    img.src= backgrounds[i];
  }

  function nextBackground() {
    body.css(
      "background-image", // Use background-image instead of `background`
       "url("+backgrounds[++current % backgrounds.length]+")" // no need to `current = `
    );
    setTimeout(nextBackground, 5000);
  }
  setTimeout(nextBackground, 5000);
  body.css("background-image", "url("+backgrounds[0]+")");
});

$（函数（）{
变量body=$（'body'）；
变量背景=[
'//placehold.it/800x600/cf5&text=1'，//不需要'url（`here
“//placehold.it/800x600/f1f&text=2”，
“//placehold.it/800x600/333&text=3”，
“//placehold.it/800x600/0f0&text=4”，
“//placehold.it/800x600/70f&text=5”
];
无功电流=0；
//预加载所有图像//防止（如果可能）图像加载之间出现白色间隙
对于（var i=0；iI将您的代码复制到jsfiddle中，它似乎可以工作：-（在Chrome中测试）。这并不完美，因为我在每张图像之间看到一个空白的白色背景，但你似乎在说它根本不工作？谢谢！FIreFox似乎有问题，但我希望图像完全覆盖页面，而不是平铺，也不会褪色。完全覆盖页面是选择适当大小的图像的问题（我只是使用了占位符）和/或缩放CSS中的图像。
不重复
应该会停止平铺（但当您在JS中设置背景时，它可能会覆盖样式表）。
html, body{height:100%;}
body { 
  background: none 50% / cover; /* full background image */
}

$(function() {
  var body = $('body');
  var backgrounds = [
    '//placehold.it/800x600/cf5&text=1', // no need to `url(` here
    '//placehold.it/800x600/f1f&text=2',
    '//placehold.it/800x600/333&text=3',
    '//placehold.it/800x600/0f0&text=4',
    '//placehold.it/800x600/70f&text=5'
  ];
  var current = 0;

  // Preload all images // Prevent (if possible) white gaps between image load
  for(var i=0; i<backgrounds.length; i++){
    var img = new Image();
    img.src= backgrounds[i];
  }

  function nextBackground() {
    body.css(
      "background-image", // Use background-image instead of `background`
       "url("+backgrounds[++current % backgrounds.length]+")" // no need to `current = `
    );
    setTimeout(nextBackground, 5000);
  }
  setTimeout(nextBackground, 5000);
  body.css("background-image", "url("+backgrounds[0]+")");
});