CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rmccawl
rmccawl

Reputation: 11

Changing background images, Jquery + CSS

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

Upvotes: 1

Views: 2571

Answers (4)

Kev
Kev

Reputation: 1

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

Upvotes: 0

ehm
ehm

Reputation: 23767

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

Upvotes: 1

FiveTools
FiveTools

Reputation: 6030

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

create classes in your css with different background images.

Upvotes: 2

FiveTools
FiveTools

Reputation: 6030

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

I found a jquery image rotatation script and adding hyperlinks to the images breaks the animation

Upvotes: 2

Related Questions