Ротация блоков

Оглавление

• Создаем функцию Rotator
• HTML разметка

Простой, но эффективный способ создания ротации блоков с помощью jQuery.

Создаем функцию Rotator

Для начала создаем функцию rotator.

var index = 1;
function Rotator() {
    // Прячем все элементы
    $('.block-info').hide();

    // Задаем плавную анимацию появления элементам
    $('.block' + index).fadeIn('300');

    // Сколько элементов в ротаторе
    var count = 3;
    index++;
    if(index > count) {
        index = 1;
    }
}

// Запускаем ротатор
$(document).ready(function() {
    Rotator();
    setInterval(Rotator, 5000);
});

HTML разметка

Далее размещаем разметку блоков, которые с помощью ротатора будут заменять друг друга.

<div class="wrapper">
    <div class="block-info block1" style="display: none;">
        Блок 1
    </div>
    <div class="block-info block2" style="display: none;">
        Блок 2
    </div>
    <div class="block-info block3" style="display: none;">
        Блок 3
    </div>
</div>