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

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

Первым делом подключаем 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.1.1.1.js"></script>

Затем вставляем 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
Источник урока: http://www.malsup.com
Перевел: Евгений Стыценков
Урок создан: 7 Сентября 2009
Просмотров: 136024
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Сентября 2009 23:04
    Arnold
    Интересно, а как сделать, чтобы галерея работала и после загрузки через AJAX?
  • 7 Сентября 2009 23:44
    Tesessssss
    Афигеть какие возможности, спасибо!
  • 7 Сентября 2009 23:52
    Laserdance
    крутые эффекты)
  • 8 Сентября 2009 08:08
    Виталий
    Обалдеть галерейка. Я поражен. СПАСИБО ОГРОМНОЕ!!!!
  • 8 Сентября 2009 18:08
    Сергей
    Действительно нужный и полезный урок!
  • 8 Сентября 2009 18:24
    Кальяныч
    Классно! Скажите пжлуста, как в 4 демо время смены картинки поменять?!
  • 9 Сентября 2009 20:11
    Кальяныч
    Всё разобрался!
  • 9 Сентября 2009 22:51
    ЕвгенийСтыценков
    Кальяныч, молодец
  • 14 Сентября 2009 11:14
    Дониер
    Скажите, как можно убрать цикличность? например у меня две картинки, нужно что бы одна заменилась на вторую и остановилась, спасибо заранее
    • 20 Ноября 2012 21:33
      Waydim
      пропиши свойство after ^) **after - функция, которая должна выполниться после завершения перехода. Пример: after: onAfter, здесь onAfter- какая-либо функция.
  • 14 Сентября 2009 16:04
    ЕвгенийСтыценков
    Дониер, можно. сегодня-завтра дополню
  • 15 Сентября 2009 16:52
    Дониер
    Евгений, спасибо! Но я уже сам разобрался - в поле остальных настроек показано надо лишь вписать - nowrap: 1
  • 15 Сентября 2009 18:25
    Дониер
    Появилась еще одна проблемка - прозрачные объекты выходят с плашкой на фоне. Перепробывал в стилях поменять на transparent но не выходит. Может, Евгений Вы знаете как решить данную проблему. Спасибо заранее!
  • 16 Сентября 2009 13:55
    ЕвгенийСтыценков
    Дониер, пришли на stev333555-сабака-гугпочта, посмотрю...так сказать ничего не могу
  • 18 Сентября 2009 12:57
    ingoods
    Sorry for Evgeniy not is scripts or opera ф
  • 31 Декабря 2009 14:47
    Андрей
    Как можно сделать, чтобы картинки сами по себе не менялись, а только по клику на соответсвующий блок?
  • 17 Января 2010 01:38
    alexks
    Есть баг в опере, при прокрутке страницы вверх/вниз само слайдшоу остается на месте а остальной контент прокручивается. Это происходит только в момент смены изображения. Т.е. слайдшоу оказывается не зафиксированным на странице. В остальных браузерах все ок. В демках на сайте тоже все нормально работает, даже в опере. Никто не знает в чем может быть косяк? На сколько я понял тут проблема в скрипте, когда он сменяет одну картинку другой, он как бы устанавливает position fixed тому диву где крутится слайдшоу... как бы это пофиксить? Никто не знает в чем может быть косяк?
  • 31 Января 2010 18:33
    werstalfranker
    всем привет! подскажите пожалуйста, как сделать чтоб при входе на страницу сразу начало работать слайдшоу, и слайды сменялись непрерывно, без задержок! всё перепробывал, ничего не получаеться...(((
  • 23 Марта 2010 21:20
    Евгений
    Здрасти! У меня чет ни в какую, слайд не включается. Все делаю как в инструкции написано но ничего не выходит. Стиль блока делаю таким: overflow:hidden; width:ширина рис; height:высота рис; Сами рис. в формате PNG. Пожалуйста помогите разобраться в моей ошибке.
  • 24 Марта 2010 18:26
    Евгений
    Все в своей ошибке разобрался! Не был подключен сам скрип jquery, из за чего и не вкл. слайд. Но вот появилась другая проблема, в IE7 при переходе с картинке на другую, в тех местах где рис. Плавно переходит в прозрачный фон, появляются черные пятна. В Opere такого не происходит, если кто знает как устранить черные пятна в IE7 то напишите плиз :) .
  • 15 Июня 2010 22:55
    delfinij
    Добрый день! Пожалуйста, помогите. Вот уже который час пытаюсь подключить слайдшоу и все ни как. Что значит "Теперь связываем #s1 c плагином:" ?
  • 17 Июня 2010 12:24
    delfinij
    Урааааааааааааааааааа! Я разобралась!!!! хоть никто и не ответил мне!
    • 4 Декабря 2010 01:26
      koberman
      а я нет!!! ПОмоги, как ты это связал???
  • 7 Июля 2010 08:54
    Antseburova
    Здравствуйте) Спасибо за отличный урок :) Но мне нужна Ваша помощь. Подскажите мне, пожалуйста, как сделать так, чтобы активация слайд-шоу происходила при наведении мыши на блок, а остановка в обратном случае (при mouseOut)
  • 7 Июля 2010 14:34
    Antseburova
    Помогите, пожалуйста. Очень нужно...
  • 10 Августа 2010 04:44
    konstrukt
    Не работает в Joomla Картинки стоят, все по вертикали. Все скрипты выдают ошибки, например: jquery.easing.js Строка 39 jQuery is not defined jQuery.easing['jswing'] = jQuery.easing['swing']; $(document).ready (function() { На эту строку пишет, что - is not a function Подскажите, где подправить? Спасибо.
  • 10 Августа 2010 19:23
    konstrukt
    С ошибками разобрался, т.е. их нет! Но НЕ работает в Firefox - Картинки стоят, все по вертикали. В IE и Opera работает. Подскажите, чего не хватает в Firefox? Спасибо.
  • 8 Сентября 2010 06:50
    MoJIoT_Ok
    Доброе время суток! Спасибо Евгений за пояснение опций... с этим разобрался. Но у меня дело в другом и никак не могу сообразить! В планах у меня на сайте использовать избражений не менее полутысячи, так в этом и вопрос. Есть ли возможность указать директорию содержащую ресурсы, а не прописывать отдельно каждое изображение? Я бы не поленился и написал =), но изображения часто будут обновляться, и блоков с ротацией у меня на странице планируется более 10. Думаю что передал то что хочется и искренне надеюсь на Вашу помощь!
  • 22 Ноября 2010 11:02
    dimd
    Есть несколько картинок в формате PNG-24 с прозрачным фоном, задний фон на котором необходимо листать картинки цветной..в Опере, Хроме и в ФФ отображается нормально, а в ИЕ у картинок вместо прозрачного появляется белый фон(( Можно ли это как то исправить??
  • 22 Ноября 2010 11:51
    dimd
    Нашел решение..классу .pics img надо добавить background:none !important; тогда в ИЕ не видно белого фона..
    • 27 Марта 2012 16:40
      azbukait
      а можно подробнее, у меня ничего не изменилось
      .pics img { padding: 0px; border: 0px; width: 251px; height: 250px; top: 0; left: 0 ;	background:none !important;
      
  • 22 Декабря 2010 13:02
    heny
    Спасибо! мне очень пригодилось этот слайд-шоу, но у меня с ним проблемы. На моем сайте сверху стоит превью из трех картинок, которые по очереди меняются, я использовала ваш урок. Когда открываешь сайт, то они сначала показываются столбиком каждая (предусмотрено по 4), и я никак не могу это побороть, ну и я, конечно, далеко не профи. Подскажите как это исправить. Сайт www.laminar.ru. помогите, пожалуйста.
  • 2 Февраля 2011 13:13
    vborblik
    Спасибо большее наконец нашел то что надо, вы русселер очень хорошие уроки делаете понятно и доступно каждому!
  • 26 Февраля 2011 19:06
    Snash
    А как в навигации сделать не цифры а названия картинок к примеру или их титле?
  • 7 Марта 2011 06:22
    usaghi
    Солидарен с последним оратором. И еще есть проблема, аналогичная описанной Antseburova. На hover слайдер тормозит, но вот после этого не возобновляет просмотр. Как подключить hover(over, out)? Подскажите, пожалуйста.
  • 16 Марта 2011 15:41
    Kamushek
    Maxim Добрый день показывает сначала маленькие картинки после перезагрузки страницы большие в Opera. Что делать?
  • 28 Июля 2011 17:01
    Serdgou
    После пролистывания всех фото, появляется исходный код, как его убрать?
  • 18 Августа 2011 18:14
    ubuntuAndrew
    Ммм... очень хотелось бы слайдер с превьюшками а не с циферками... если есть соображения, шлите или на 89112873665-собака-mail . ru или на vkontakte . ru / ubuntuandrew. Буду очень благодарен!
  • 26 Августа 2011 15:03
    mrBrabuz
    Помогите пожалуйста как сделать картинки в таком слайдере не абсолютного позиционирования??? просто у меня над слайдером выподающее меню и при наведении курсора мыши слайдер перекрывает это меню...(((( можно на мыло: web.vegu@mail.ru заранее большое спасибо!))
  • 28 Сентября 2011 08:11
    tima2010
    Возможно ли сделать навигацию
    pager: '#nav' // <div id="nav"></div>
    в виде превью изображений ?
  • 30 Сентября 2011 16:07
    sokol_fokir
    У МЕНЯ изображения в верхнем левом углу!всё это из-за position: absolute и top: 0px; left: 0px; как решить эту проблему
  • 13 Октября 2011 08:39
    rolin
    А у меня не получается сделать так чтобы рядом распологались слайды с одним и тем же эффектом(((( К примеру в шапке четыре изображения и вот они меняются однинаковыми эффктами..но у меня работает только первый слайд а остальные просто развернуты вертикально(...подскажите пожалуйста как поправить?
  • 13 Октября 2011 15:25
    rolin
    Все))...разобрался сам)))
  • 1 Ноября 2011 21:57
    plis
    помогите сделать обтекание текстом слайд шоу.
  • 20 Декабря 2011 13:18
    limurec
    Подскажите почему после подключения jquery.easing.1.1.1.js все мои эффекты перестают работать??? Убираю его и опять все нормально...
  • 21 Декабря 2011 17:35
    xalk
    Большое спасибо за урок, очень полезно. Я реализовал, получается очень прикольно ))
  • 11 Марта 2012 13:37
    Bicker
    адаптировал под свои нужды.. а когда вставляю в поле простой таблицы почему то перестает работать... в чем может быть дело?
  • 20 Ноября 2012 21:34
    Waydim
    Спасибо тебе человечище!!! пришлось и к столу и вовремя!
  • 11 Февраля 2013 15:06
    Shaft
    Отлично, спс! +10 к твоей карме)
  • 21 Июня 2013 13:38
    Femme
    прекрасная работа! не оторваться :-)) спасибо!
^ Наверх ^