JavaScript 动态淡入淡出背景图像

Question

我正在尝试以 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:

body { 
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 40px;
  padding-bottom: 40px;
}

但是没用。甚至背景也是空白的。 <body> 没有任何属性。

Answer 1

jsBin demo

你的脚本很好，我只需要改变几处：

CSS:

html, body{height:100%;}
body { 
  background: none 50% / cover; /* full background image */
}

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]+")");
});

要获得漂亮的淡入淡出 EFX，您可以看看我半天前回答的这个问题：

JavaScript 动态淡入淡出背景图像

JavaScript Dynamic Fade Background Image

html

javascript

css

jquery

web