Изменение фоновых изображений, Jquery + CSS

Question

Я работаю над клиентским веб-сайтом и хочу, чтобы фоновые изображения в div "cruise_offers" изменились, возможно, только 3 - 4 изображения в ротации.

Мои знания jquery довольно просты, поэтому любая помощь будет очень полезна.

Я бы предпочел, чтобы он работал с jQuery, поскольку я использую его в другом месте на сайте.

Моя разметка:

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

Приветствия

Рори

Answer 1

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

создавать классы в вашем css с различными фоновыми изображениями.

Answer 2

Проверьте эту ссылку - я работал над чем-то похожим, и это может помочь:

Я нашел скрипт вращения изображения jquery и добавление гиперссылок к изображениям нарушает анимацию

Answer 3

Может быть, что-то подобное будет работать (я не проверял).

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

Проверьте плагин Cycle и посетите демонстрации внизу страницы, чтобы начать.