Дата публикации
4 Сентября 2019
Дата изменения
15 Декабря 2019
Уникальных просмотров
150

Оглавление

Простой, но эффективный способ создания ротации блоков с помощью 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>

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1416 s
Время запросов: 0,1416 s
Количество запросов: 25
Источник: cache