QR CODE для записи

Простое слайд-шоу на jQuery

jQuery’s пытается сделать нашу жизнь легче. Так давайте воспользуемся девизом «меньше пишем — больше делаем»,  и создадим простое слайд-шоу с использованием jQuery, и незначительным использование JavaScript и CSS.

Пример этого слайд-шоу можно увидеть на главной странице нашего сайта в левой колонке (новинки PS3).

Во-первых, давайте создадим html код, как можно легче. Сначала сделаем контейнер div с id=»slideshow», в который мы поместим наши изображения.

<div id="slideshow">
   <img class="active" src="img/img1.jpg" alt="" />
   <img src="img/img2.jpg" alt="" />
   <img src="img/img3.jpg" alt="" />
</div>

Обратите внимание на class=»active». Этот клас будет говорить скрипту, что это изображение должно быть сразу видимым, даже при отключенном в браузере JS.

Теперь опишем стили CSS, в которых опишем позиционирования изображения относительно друг друга, и сделаем активное изображение на высшем уровне z-index:

#slideshow {
   position:relative;
   height:350px;
}

#slideshow IMG {
   position:absolute;
   top:0;
   left:0;
   z-index:8;
}

#slideshow IMG.active {
   z-index:10;
}

#slideshow IMG.last-active {
   z-index:9;
}

Здесь мы сделали абсолютное позиционирование и определили высоту контейнера для слайд-шоу (#slideshow). Кроме того, обратите внимание, на то что мы создали три различных z-index — мы будем манипулировать ими с помощью jQuery.

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

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Здесь мы устанавливаем в JavaScript интервал слайдов slideSwitch() в 5 секунд. Затем slideSwitch() применяет CSS класс «active», чтобы вывести следующее изображение на вершину блока. Поскольку мы будем выбрать изображения больше, чем один раз на протяжение slideSwitch(), мы определяем переменные $active и $next для селектора исполнения (selector performance).

Далее мы должны сделать исчезновение изображений:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Применим класс ‘last-active’ у которого z-index равен 9, что бы опустить изображение, под «active«. И затем сделаем его прозрачным, выставив opacity в 0 и с помощью функции animate() делаем плавное исчезновение. И теперь делаем запрос (callback) на удаление z-index классов из предыдущего изображения, когда анимация (animate()) завершается.

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

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Сначала определите изображение по умолчанию для переменной $active, которое при этом должно быть последним изображение в блоке. Это объясняется тем, что на основе абсолютного позиционирования, последняя картинка появляется на верху, и мы должны начать с нее, если мы хотим избежать мерцания.

Если вы хотите улучшить эту функцию, попробуйте поиграть со скоростью анимации. Кроме того, в этом слайд-шоу можно легко преобразовать поддержку DIV, вместо IMG.

Скачать архив с примером

Источник: Jon Raasch