Слайд-шоу сейчас очень часто применяется в web дизайне, красивая смена изображений привлекает внимание, поэтому слайд шоу очень хорошо подходит для презентации какой либо важной информации или товара. В этом примере вы увидите, как сделать функциональное легко настраиваемое слайд шоу с использованием библиотеки jQuery и специального к не плагина jQuery Cycle.
Для начала скачайте архив, в котором находятся все необходимые javascript файлы.
Demo
Архив
В начале HTML документа подключаем библиотеку и плагин jQuery.
jQuery Cycle plugin - Слайд-шоу
Теперь добавляем DIV блок с id s1 в котором находятся ссылки на изображения которые будут использоваться в слайд-шоу.
Связываем наш блок div id=»s1” с плагином jQuery Cycle, этот участок кода можно вставить в сам html документ или вынести в отдельный js файл как сделано у нас примере.
$(function() { $('#s1').cycle({ fx: 'fadeZoom', // Название эффекта перехода delay: -3000,// Время смены изображения timeout: 5000 // Время показа изображения }); });
Как вы видите здесь очень легко изменять настройки такие как эффект перехода между изображениями, время смены картинки и время её показа.
Список доступных эффектов .
|
|
Опции.
- fx — имя эффекта
speed — скорость
timeout — время показа
random — показ слайдов случайным образом (активация — random: 1 )
pause — при наведении мышью смена изображений останавливается (активация — pause: 1 )
easing — имя easing-эффекта (работает только при подключенном плагине jQuery Easing Plugin v1.1.1, с последней версией 1.3 у меня работать отказался). См. второй пример второй демки.
delay — задержка. Добавляется к таймауту первого слайда. Опция может быть полезна при наличии нескольких слайдов на странице, т.е. можно сделать чтобы слайды у разных наборов менялись неодновременно, сохраняя при этом одинаковое время показа.
sync — контролирует, происходят ли смены слайдов синхронно? По умолчанию опция включена (отключаем — sync: 0).
jQuery Cycle