JS and CSS changing image on interval

Question

i am wanting to have my webpage display a different background every minute or there abouts, the image is also quite large so it would have to fit using cover. The background is a background-image on the body here is my css code

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

and i want to have the script change the url (or source img) to a differrent one every minute. I tryed this with setInteval and onLoad in html but i cant crack it!

Thanks very much

Possible duplicate: http://stackoverflow.com/questions/6440952/how-to-change-background-on-every-5s — Malachi, May 27 '16 at 20:49
Ehm.. I had to google it to be honest: http://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled ... I think it says to 'close' the question. — Malachi, May 27 '16 at 20:55

Dezefy · Answer 1 · 2016-05-27T20:59:51.950

An easiest solution is to use 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});

Here is a jQuery only solution.

$(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

Thanks but i found something that uses js since im not familiar with jQuery. — aidan, May 27 '16 at 20:52

score 0 · Answer 2 · answered May 27 '16 at 22:49

IMHO this code snippet will get you started.

// 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 and CSS changing image on interval

2 Answers2