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

我希望脚本每分钟将url（或源img）更改为不同的。我用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

Answer 2

恕我直言，此代码段将帮助您入门。

// get reference to body
var main = document.body;

// next two lines of code allow toggle between colors to demonstrate this example.
var color = function() {
  var col = "red";
  return function() {
    col = (col === "red" ? "blue" : "red");
    return col;
  };
};

var nextColor = color();


// using setTimeout instead of setInterval

function loop() {

  var timeoutId = setTimeout(function() {
    console.log('clearing', timeoutId)
    clearTimeout(timeoutId);
    main.style.background = nextColor();
    loop();
  }, 1000);

}

https://jsfiddle.net/4L4bww5r/

JS和CSS在间隔上改变图像

2 个答案: