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?

first guess is whether or not the relative path to the image resolves correctly. — Kai Qing
– Kai Qing, Commented Feb 19, 2014 at 1:39
have demo ? or link ? anyways shouldn't you checking condition for if(count > images.length) {count==-1;}or clearInterval if not loop ? — Venkat Reddy
– Venkat Reddy, Commented Feb 19, 2014 at 1:42
I don't see anything resetting back your count, seems like it deeps incrementing forever. Also, why do you have to use 2 different class names? myelement and jumbotron? — aiiwa
– aiiwa, Commented Feb 19, 2014 at 1:46
My mistake, myelement should be jumbotron. Also, i do want it to loop forever. — littleK
– littleK, Commented Feb 19, 2014 at 1:49

thescientist · Accepted Answer · 2014-02-19 01:57:13Z

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

answered Feb 19, 2014 at 1:57

thescientist

2,9581 gold badge21 silver badges15 bronze badges

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

Comments

ducdhm · Accepted Answer · 2014-02-19 02:01:34Z

1

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

answered Feb 19, 2014 at 2:01

ducdhm

1,95215 silver badges26 bronze badges

Comments

jingyinggong · Accepted Answer · 2014-02-19 02:32:44Z

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

Abraham Hamidi · Accepted Answer · 2014-02-19 02:01:09Z

0

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

edited Feb 19, 2014 at 2:01

answered Feb 19, 2014 at 1:55

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

JavaScript dymanically change CSS background style

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related