Changing background images, Jquery + CSS

Question

Hi all,

I am working on a clients website and want the background images on the "cruise_offers" div to change, possibly only 3 - 4 images in rotation.

My jquery knowledge is quite basic so any help would be great.

I would prefer it to work with jQuery as I am using it elsewhere on the site.

My markup:

<div class="cruise_offers">
    <span class="overlay_bar">
        <a href="cruiseoffers.html">View our Great Cruise Offers</a>
    </span>
</div>

Cheers

Rory

Answer 1

Check out this link - I worked on something similar and it may help:

http://stackoverflow.com/questions/2148239/i-found-a-jquery-image-rotatation-script-and-adding-hyperlinks-to-the-images-brea

Answer 2

$(div.cruise_offers).removeClass('cruise_offers');
$(div.cruise_offers).addClass('cruise_offers1');

create classes in your css with different background images.

Answer 3

Maybe something like this would work (I haven't tested it).

var current_image = 0;
var rotation_speed = 5000; //milliseconds
var where = $("div.cruise_offers");
var images = new Array();
    images[0] = 'img1.jpg';
    images[1] = 'img2.jpg';

function change_image() {
    current_image++;
    if (images[current_image].length == 0) {
        current_image = 0;  
    }
    $(where).css("background-image", "url("+images[current_image]+")")  
}

if (where.length != 0) {
    setTimeout("change_image()", rotation_speed);
}

Answer 4

Check out the Cycle plugin and visit the demos at the bottom of the page to get started.