Changing background-image multiple times

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

I'm trying to animate the changing of the background on a page. I have a folder with 4 pictures that I want the for to shuffle through. The problem is, with this code, the next image that fades in is the last one, aka the 4th one in this case, then it stops changing. I'm certainly doing something wrong.

that for-loop is done in under half a second, so even if you are looping through all the pictures (which I believe you are), you will only see the last because the background-image changes every few milliseconds, too fast to see, even before the image is loaded — myfunkyside
– myfunkyside, Commented Oct 11, 2014 at 16:17
and the time1 += 5000 line is useless, because every next iteration you reset the times to their original values. Place the declarations of the time-vars outside the for-loop — myfunkyside
– myfunkyside, Commented Oct 11, 2014 at 16:21

ced-b · Accepted Answer · 2014-10-11 16:23:37Z

1

Instead of doing a loop and multiple setTimeouts you should use a setInterval instead as the for-loop will execute almost instantaneously and you will only see the result of the last iteration.

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

answered Oct 11, 2014 at 16:23

ced-b

4,0371 gold badge31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shlomi Hassid · Accepted Answer · 2014-10-11 18:12:15Z

Here is my solution using jQuery and CSS to make a nice background transition animation, You can set howmany times to change or run it as an infinite loop using setInterval. the background in the CSS is the first background displayed and acts as a fallback too.

DEMO: COOL jsFiddle

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

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

Collectives™ on Stack Overflow

Changing background-image multiple times

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related