We help IT Professionals succeed at work.

Jquery Change background color of div at set interval

Last Modified: 2013-11-19
I am creating a slideshow on my website, the slide show will be a fixed size, however, I am putting the slideshow inside of a DIV that spans the whole width of the screen. What I would like to do is change the background color of the DIV each time a new photo in the slideshow is displayed.

In a previous program I was using the addClass() and removeClass() features but for some reason I can't seem to get a working example.

Can someone help me? I love to be able to read from an XML or JSON file to pass in the image and background color.

Watch Question

You could try this, but i don't really know why the addClass() and removeClass() isn't working if i don't see the code
$("#your_div_id").css('background-color', '#ff0000');

Open in new window


I just butchered the code so before I post I'm probably gonna have to redo some, but here's how I want the JSON to look.

Open in new window

This one is on us!
(Get your first solution completely free - no credit card required)


Minor Changes of Plans.
If I use the script on the attached link, and then add the BG color to, say the ALT tag of the image or LI tag, where would I need to put it to get the background to change per picture?  I've tried it on the alt tag, but it only seems to be reading the alt tag for the first LI and not for each one.



I have it somewhat working:

<script type="text/javascript">
function slideSwitch() 
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');	
	var bg = $next.attr("alt");
	$("div#content").css({opacity: 0.9}).css("backgroundColor", bg).animate({opacity: 1.0}, 1000);	

    // RANDOM
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $next.css({opacity: 0.0})
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');

$(function() {
    setInterval( "slideSwitch()", 10000 );

<style type="text/css">
	margin: 0px;

	position: relative;
	width: 551px !important; 
	height: 289px !important; 

#slideshow IMG 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

#slideshow IMG.active 
#slideshow IMG.last-active 
	margin: 0px;
	background-color: #001d3b; 
	margin: 0 auto;
	width: 551px;
<div id="content">
<div id="container">
<div id="slideshow">
    <img src="bam.jpg" alt="#001d3b" class="active" />
    <img src="ene.jpg" alt="#000000" />
    <img src="hfsa.jpg" alt="#003760" />
    <img src="ion.jpg" alt="#000000" />
    <img src="pose.jpg" alt="#000000" />
    <img src="who.jpg" alt="#8a854b" />

Open in new window


I ended up with a partial working product
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.