Change DIV CSS on a timer using jQuery

Question

enter image description here I'm new to javascript and was just wondering the best way to go about changing the background image (only 2 images) of a DIV say like every 10 seconds. Thanks :)

have a look into the function setTimeout() in javascript (w3schools.com/jsref/met_win_settimeout.asp) — David Laberge
– David Laberge, Commented Jul 26, 2011 at 16:12
is the green and red image the same all the way through or specific to each div? — Sparkup
– Sparkup, Commented Jul 26, 2011 at 16:52

War · Accepted Answer · 2017-12-14 11:21:55Z

2

This should do it for you : http://jsfiddle.net/U9GCM/

$(document).ready(function(){
var setFirst = $('.set').first();    
setFirst.addClass('active');
setTimeout(function(){change_background();},1000);
});

function change_background(){
    var setFirst = $('.set').first(),
        setActive = $('.active'),
        setNext = setActive.next(),
        setCheckActive = setActive.attr('id'),
        setCheckLast = $('.set').last().attr('id');

    if(setCheckActive == setCheckLast){
        setNext = setFirst;
        }

    $('.active').removeClass('active');
    setNext.addClass('active');
    setTimeout(function(){change_background()},1000);
    }

You can add as many divs as you want, just change 1000 to 10000 for ten seconds.

Hope it helps.

edited Dec 14, 2017 at 11:21

War

8,6584 gold badges54 silver badges101 bronze badges

answered Jul 26, 2011 at 16:20

Sparkup

3,7522 gold badges38 silver badges50 bronze badges

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

1 Comment

HAWKES08 Over a year ago

thanks. how would i change a div inside the div background image too at the same time?

David Laberge · Accepted Answer · 2011-07-26 16:14:30Z

1

Try something like this:

$(document).ready(function(){
   setTimeout('setbackground()',10000);
});

function setbackground(){ 
  // change you image here
  setTimeout('setbackground()',10000); // to change the image in 10 seconds
}

answered Jul 26, 2011 at 16:14

David Laberge

16.1k15 gold badges56 silver badges84 bronze badges

2 Comments

HAWKES08 Over a year ago

i need the image to swap back too

David Laberge Over a year ago

The function call it self back. You would need to test the current display, then change it for the following one.

MikeM · Accepted Answer · 2011-07-26 16:26:49Z

0

jsfiddle demo

alternate CSS classes (ie bg1 <--> bg2) with a setInterval function

var body = document.getElementsByTagName('body')[0],
    switchBG = function() {
        var bgTimer = setInterval(function() {
            body.className = (body.className === "bg2" ? "bg1" : "bg2");
        }, 10000 /* 10000 ms = 10 sec */);
    };
switchBG();

this is straight js

answered Jul 26, 2011 at 16:26

MikeM

27.5k4 gold badges68 silver badges80 bronze badges

Comments

Darkry · Accepted Answer · 2011-07-26 16:37:09Z

0

$(document).ready(function(){
   var i = 0;
   var images = newArray("image1.jpg","image2.png","image3.jpg");
   setTimeout('changeBack(i, images)',10000);
});

function changeBack(i, images) {
i++;
if(i > images.length) {
    i = 0;
}
$('#changeBackInThisId').css('background-image', images[i]);
setTimeout(changeBack(i, images), 10000);
}

I hope it works :-)

Or you can have any number of divs in your code with style="display: none" (besides the first of them) and each 10 seconds sets display: block; to one of them.

edited Jul 26, 2011 at 16:37

answered Jul 26, 2011 at 16:19

Darkry

5902 gold badges12 silver badges26 bronze badges

Comments

bstakes · Accepted Answer · 2011-07-26 17:45:55Z

0

Here's a plugin type answer: http://jsfiddle.net/EpGsc/

answered Jul 26, 2011 at 17:45

bstakes

1,89814 silver badges12 bronze badges

Comments

Seth · Accepted Answer · 2011-07-26 16:13:07Z

-1

var time = 10000; // Ten seconds 
var timer = setInterval(function() {

    $('#myDiv, #myOtherDiv').css('background-image', '/new/img/path.jpg');

}, time);

Not tested but should work. I'll work on an example.

answered Jul 26, 2011 at 16:13

Seth

6,2353 gold badges30 silver badges44 bronze badges

1 Comment

HAWKES08 Over a year ago

basically i have 3 divs in a row. i need the background to change on each div in order every 10 seconds in a loop.

Collectives™ on Stack Overflow

Change DIV CSS on a timer using jQuery

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related