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

и я хочу иметь сценарий изменить URL (или источник IMG) в differrent один раз в минуту. Я попробовал это с setInteval и onLoad в html, но я не могу его взломать!

Большое спасибо

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/