Реализация слайд-шоу при помощи плагина JQuery cycle
Последнее время приходится всё чаще использовать слайд-шоу в работе. Применял различные скрипты, писал свой, но сейчас не об этом, а о готовом и неплохом скрипте - плагине
Небольшой пример использования скрипта в своём коде:
1. Подключаем необходимые библиотеки
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.1.1.js"></script>
2. Контейнер с картинками
<div id="slider">
<img src="img/img1.jpg" />
<img src="img/img
2.jpg" />
<img src="img/img3.jpg" />
<img src="img/img4.jpg" />
<img src="img/img5.jpg" />
</div>
3.Использование плагина
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 2000
});
});
Опции плагина:
- fx - имя эффекта
- speed - скорость
- timeout - время показа
- random - показ слайдов случайным образом (активация - random: 1 )
- pause - при наведении мышью смена изображений останавливается (активация - pause: 1 )
- easing - имя easing-эффекта (работает только при подключенном плагине jQuery Easing Plugin v1.1.1).
- delay - задержка. Добавляется к таймауту первого слайда. Опция может быть полезна при наличии нескольких слайдов на странице, т.е. можно сделать чтобы слайды у разных наборов менялись неодновременно, сохраняя при этом одинаковое время показа.
- sync - контролирует, происходят ли смены слайдов синхронно? По умолчанию опция включена (отключаем - sync: 0).
Опции управления :
- next - следующий. Пример: next: '#next_slide', здесь #next_slide - элемент, который будет выступать в качестве кнопки "next"
- prev - предыдущий. Пример: prev: '#prev_slide', здесь #prev_slide - элемент, который будет выступать в качестве кнопки "prev"
- pager - создает постраничную навигацию слайдов. Пример: pager: '#nav', здесь #nav - пустой элемент, который будет преобразован в постраничный переключатель.
- stop - остановка слайдшоу.
- pause - пауза. resume - продолжение. Позволяет по событию приостановить и продолжить показ слайдов
*Обратите внимание, что stop, pause, resume в этом случае привязывается к событию, а не прописывается в настройках эффекта.
Опции обратного вызова :
- before - функция, которая должна выполниться во время перехода. Пример: before: onBefore, здесь onBefore- какая-либо функция.
- after - функция, которая должна выполниться после завершения перехода. Пример: after: onAfter, здесь onAfter- какая-либо функция.
Дополнительные опции :
- speedIn - Скорость появления слайда. В случае использования этой опции, опция speed не нужна.
- speedOut - Скорость исчезновения слайда. В случае использования этой опции, опция speed не нужна.
- easeIn - easing-эффект при появлении слайда.
- easeOut - easing-эффект при исчезновении слайда.
|