javascript - JS和CSS间隔改变图像

Question

我想让我的网页每分钟或大约显示一个不同的背景，图像也很大，所以它必须适合使用封面。背景是主体上的背景图像，这是我的 css 代码

#body {
  background-image: url("home.jpg");
  background-position: top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin: 0px;
}

我想让脚本每分钟将网址(或源图像)更改为不同的网址。我在 html 中尝试使用 setInteval 和 onLoad 但我无法破解它!

非常感谢

Answer 1

最简单的解决方案是使用 jQuery backstretch plugin .

  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg",
      "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg",
      "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

这是一个仅 jQuery 的解决方案。

$(function() {
    var body = $('body');
    var backgrounds = new Array(
        'url(https://dl.dropbox.com/u/515046/www/outside.jpg)',
        'url(https://dl.dropbox.com/u/515046/www/garfield-interior.jpg)'
    );
    var current = 0;

    function nextBackground() {
        body.css(
            'background',
            backgrounds[current = ++current % backgrounds.length]
        );

        setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css('background', backgrounds[0]);
});

Reference