Изменение фонового изображения несколько раз

Question

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

Я пытаюсь анимировать изменение фона на странице. У меня есть папка с 4 картинками, которые я хочу, чтобы для перетасовки. Проблема в том, что с этим кодом следующее изображение, которое затухает, является последним, а в этом случае 4-м, после чего оно перестает меняться. Я, конечно, что-то делаю неправильно.

Answer 1

Вместо того, чтобы делать цикл и несколько setTimeouts, вы должны использовать setInterval, поскольку цикл for будет выполняться почти мгновенно, и вы увидите только результат последней итерации.

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

Answer 2

Вот мое решение с помощью JQuery и CSS, чтобы сделать хороший фон анимации перехода, Вы можете установить howmany раз изменить или запустить его в бесконечный цикл, используя setInterval. Фон в CSS - это первый фон, который отображается и действует как резерв.

DEMO: COOL jsFiddle

КОД - 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); 
}); 

КОД - 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; 
}