Эффекты показа можно настроить с помощью опций:
$(document).ready(function() {
$('#scrollDown').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 2000,
pause: 1
});
});
Здесь мы задали элементу #scrollDown эффект scrollLeft со скоростью смены слайдов 1000, время показа одного слайда задали 2000 и разрешили остановку смены слайдов при наведении курсора .
Опции (демо
1, демо 2):
- fx - имя эффекта
- speed - скорость
- timeout - время показа
- random - показ слайдов случайным образом (активация
- random: 1 )
- pause - при наведении курсора смена изображений
останавливается (активация - pause: 1 )
- easing - имя easing-эффекта (работает только при
подключенном плагине jQuery Easing Plugin
v1.1.1, с последней версией 1.3 у меня работать
отказался). См. второй пример второй демки.
- delay - задержка. Добавляется к таймауту первого
слайда. Опция может быть полезна при наличии нескольких слайдеров на
странице, т.е. можно сделать чтобы слайды у разных наборов менялись
неодновременно, сохраняя при этом одинаковое время показа.
- sync - контролирует, происходят ли смены слайдов
синхронно? По умолчанию опция включена (отключаем - sync:
0). На второй демке обратите внимание на
blindX и blindX_no_sync. В обоих
примерах используется эффект blindX, но во втором
случае опция sync отключена
Опции управления (демо
3):
- next - следующий. Пример: next:
'#next_slide', здесь #next_slide - элемент,
который будет выступать в качестве кнопки "next"
- prev - предыдущий. Пример: prev:
'#prev_slide', здесь #prev_slide - элемент,
который будет выступать в качестве кнопки "prev"
- pager - создает постраничную навигацию слайдов.
Пример: pager: '#nav', здесь #nav -
пустой элемент, который будет преобразован в постраничный переключатель.
- stop - остановка слайдшоу. В случае если слайдшоу
прокручивается и его необходимо остановить:
$("#stop_button").click(function(){
$('#stop').cycle('stop');
});
});
- pause - пауза. resume - продолжение. Позволяет по
событию приостановить и продолжить показ слайдов:
$("#pause_button").click(function(){
$('#pause').cycle('pause');
});
$("#resume_button").click(function(){
$('#pause').cycle('resume');
});
Обратите
внимание, что stop, pause, resume в этом случае
привязывается к событию(кнопка - button, событие - klick), а не прописывается в настройках эффекта.
Опции вызова функций (демо
4):
- before - функция, которая должна выполниться во
время перехода. Пример: before: onBefore, здесь
onBefore- какая-либо функция.
- after - функция, которая должна выполниться после
завершения перехода. Пример: after: onAfter, здесь
onAfter- какая-либо функция.
Прокрутка текстового контента (демо
5):
До сих пор мы говорили о прокрутке слайдов, содержащих фотографии,
но jQuery Cycle Plugin также позволяет прокручивать и
текстовый (текстово-графический) контент. Эффекты и опции к контенту
применимы те же, что и для графического.
Дополнительные опции (демо
6):
- speedIn - Скорость появления слайда. В случае
использования этой опции, опция speed не нужна.
- speedOut - Скорость исчезновения слайда. В случае
использования этой опции, опция speed не нужна.
- easeIn - easing-эффект при появлении слайда.(Например: bouncein, bounceout, backin, backout, easein, easeout)
- easeOut - easing-эффект при исчезновении слайда. (Те-же).
Как вы видите с помощью этого плагина можно легко построить ротатор контента, слайдер либо галерею, а количество эффектов и настроек позволяют придать яркость и динамичность показа. |
