JavaScript dymanically change CSS background style

Question

I am trying to dynamically change my background image by continuously looping through an array of image paths. The code works if I log the output to a console, but I cannot get the image to actually change.

Original CSS: (I am overriding the default style from another CSS file)

<style>
      .jumbotron { 
         background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
      }
</style>

JavaScript:

$(document).ready(function () {

var count = -1;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
setInterval(swap, 5000);

function swap(){
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important");
    console.log(images[++count % images.length]);
}

});

Any ideas?

Answer 1

You're swap function seems kind of odd. Typically for something like this, you could have a counter that gets incremented and then just resets to 0 and starts over. Also make sure you are running in an onload event handler context.

var count = 0;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");

function swap(){
    //get the next image
    var nextImage = images[count];
    console.log(nextImage);

    $('.jumbotron').css("background-image", nextImage);

    //increment count
    count = count > images.length - 1 ? 0 : count+=1;
}

$(document).ready(function(){
  setInterval(swap, 5000);
});

aside from that, make sure to check your error console for errors, and for 404's indicating you might have bad image paths

Answer 2

Try this:

$(document).load(function() {
    var count = -1;
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
    setInterval(swap, 5000);

    function swap() {
        var img = images[++count % images.length];

        $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important');
        console.log(img);
    }
});

Answer 3

Wait for the document to load:

$(document).load(function()
{
    var count = -1;
    var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
    setInterval(swap, 5000);

    function swap(){
        $('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important");
        console.log(images[++count % images.length]);
    }
});

Answer 4

I don't think change css is a good idea, you may define some classes, and dynamically change the classes on the element!

html:

<div class="dynamicBg class1"></div>
<div class="dynamicBg class1"></div>

css:

.dynamicBg {
    background-color: #7da7d8;
    background-repeat: no-repeat;
    background-position: center center;
}
.class1 {
    background-image: url('images/image1.jpg');
}
.class2 {
    background-image: url('images/rotunda2.jpg');
}
.class3 {
    background-image: url('images/rotunda3.jpg');
}
.class4 {
    background-image: url('images/rotunda4.jpg');
}

js:

$(function() {
    var classStr = 'class1 class2 class3 class4',
        classArr = classStr.split(' '), i = 0,
        $dynamicBg = $('.dynamicBg');
    setInterval(function() {
        i = i > 3 ? 0 : i + 1;
        $dynamicBg.removeClass(classStr).addClass(classArr[i]);
    }, 5000);
});