Alterando a imagem de fundo várias vezes - jquery, imagem de fundo, settimeout, fadeto

var main = function() {

for (var i = 1; i <= 4; i++)
{
var time1 = 5000;
var time2 = 5500;

var location = "url("homepage/" + i + ".jpg")";

setTimeout(function() {
$(".jumbotron").fadeTo("slow", 0, function() { });
}, time1);

setTimeout(function() {
$(".jumbotron").css("background-image", location);
}, time2);

setTimeout(function() {
$(".jumbotron").fadeTo("slow", 1, function() { });
}, time2);

time1 += 5000;
time2 += 5000;
}
};

$(document).ready(main);

Estou tentando animar a mudança doplano de fundo em uma página. Eu tenho uma pasta com 4 fotos que quero embaralhar. O problema é que, com esse código, a próxima imagem que aparece gradualmente é a última, também conhecida como a 4ª neste caso, então ela para de mudar. Certamente estou fazendo algo errado.

Respostas:

Em vez de fazer um loop e vários setTimeouts você deve usar um setInterval em vez disso, porque o loop for será executado quase instantaneamente e você verá apenas o resultado da última iteração.

var index = 0;
var images = ["image1.jpg", "image2.jpg", ...]

var timeout = setInterval(function() {

index++;

if (index >= images.length) {
clearTimeout(timeout);
return;
}

// Code for showing image here...

}, 5000);

Aqui está minha solução usando jQuery e CSS para fazer uma boa animação de transição de fundo, Você pode definir quantas vezes para mudar ou executá-lo como um loop infinito usando setInterval. o plano de fundo no CSS é o primeiro plano de fundo exibido e também atua como um substituto.

DEMO: COOL jsFiddle

CÓDIGO - jQuery:

$(function(){

var limit = 0; // 0 = infinite.
var interval = 2;// Secs
var images = [
"http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-1.jpg"
,"https://www.tipsandtricks-hq.com/images/amazing-photos/group1/tips_background_image4.jpg"
,"http://www.kriesi.at/themes/corona/files/2011/09/kode.jpg"
,"http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-2.jpg"
];

var inde = 0;
var limitCount = 0;
var myInterval = setInterval(function() {
if (limit && limitCount >= limit-1) clearTimeout(myInterval);
if (inde >= images.length) inde = 0;
$("html").css({ "background-image":"url(" + images[inde]+ ")" });
inde++;
limitCount++;
}, interval*1000);
});

CÓDIGO - CSS:

html {
/* FallBack */ background: url(http://www.bcat.eu/data/demo/jquery-bg-switcher/links/images/img-slider-2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition:background 0.5s ease-in;
-moz-transition:background 0.5s ease-in;
-o-transition:background 0.5s ease-in;
-ms-transition:background 0.5s ease-in;
transition:background 0.5s ease-in;
}