jQuery Cycle Plugin - слайдшоу? легко!

В сегодняшнем уроке мы рассмотрим плагин jQuery Cycle Plugin. С помощью этого плагина можно легко создавать ротаторы контента, банеров, галереи. Плагин очень прост и имеет множество эффектов и настраиваемых опций.

[319x86]

Первым делом подключаем jQuery, плагин jQuery Cycle и jQuery Easing Plugin v1.1.1 (необязательно, но он расширяет количество эффектов.)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="jquery.easing

Затем вставляем div-блок с изображениями (слайдами).

<div id="s1">
<img src="img/beach1.jpg" />
<img src="img/beach2.jpg" />
<img src="img/beach3.jpg" />
<img src="img/beach4.jpg" />
<img src="img/beach5.jpg" />
</div>

Теперь связываем #s1 c плагином:

$(document).ready(function() {
$('#s1').cycle('scrollDown');
});

Это самый простой способ, в котором мы просто указываем имя эффекта scrollDown, который требуется применить к #s1. Ниже список всех эффектов и ссылка на демо.

Эффекты демо 1:

• blindX
• blindY
• blindZ
• cover
• curtainX
• curtainY
• fade
• fadeZoom
• growX
• growY
• scrollUp
• scrollDown
• scrollLeft
• scrollRight
• scrollHorz
• scrollVert
• shuffle. Имеет свои настройки - смещение слайда при переходе top и left. См. демо 2, пример 2 (shuffle_and_setting).
• slideX
• slideY
• toss
• turnUp
• turnDown
• turnLeft
• turnRight
• uncover
• wipe
• zoom

Эффекты показа можно можно настроить с помощью опций:

$(document).ready(function() {
$('#scrollLeft').cycle({ 
    fx:      'scrollLeft', 
    speed:    1000, 
    timeout:  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 в этом случае привязывается к событию, а не прописывается в настройках эффекта.

Опции. Обратный вызов (демо 4):

• before - функция, которая должна выполниться во время перехода. Пример: before: onBefore, здесь onBefore- какая-либо функция.
• after - функция, которая должна выполниться после завершения перехода. Пример: after: onAfter, здесь onAfter- какая-либо функция.

Прокрутка текстового контента (демо 5):

До сих пор мы говорили о прокрутке слайдов, содержащих фотографии, но jQuery Cycle Plugin также позволяет прокручивать и текстовый (текстово-графический) контент. Эффекты и опции к контенту применимы те же, что и для графического.

Дополнительные опции (демо 6):

• speedIn - Скорость появления слайда. В случае использования этой опции, опция speed не нужна.
• speedOut - Скорость исчезновения слайда. В случае использования этой опции, опция speed не нужна.
• easeIn - easing-эффект при появлении слайда.
• easeOut - easing-эффект при исчезновении слайда.

Как вы видите с помощью этого плагина можно легко построить ротатор контента, либо галерею, а количество эффектов и настроек позволяют придать яркость и динамичность показа.

Не стесняйтесь смотреть исходный код примеров))) На сегодня это все. Благодарю за внимание.

Данный урок подготовлен для Вас командой сайта ruseller.com
Источник урока: www.malsup.com
Перевел: Евгений Стыценков
Урок создан: 7 Сентября 2009