Вед-дев, Сео, Манимейкинг

jQuery Cycle plugin - Слайдшоу или ротатор!

Нужен слайдшоу для изображений или контента? Вам поможет jQuery плагин Cycle! С помощью этого плагина можно создавать ротаторы баннеров, контента, галерей. Ну что же, приступим к нашему уроку:
Первым делом подключаем jQuery (Желательно версии 1.3.2 и выше), плагин 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-блок с изображениями (слайдами), а если вы хотите вставить контент, то для разделения на слайды используйте теги <p>ваш контент</p>.

<div id="cycle">
<img src="img/sex1.jpg" />
<img src="img/sex2.jpg" />
<img src="img/sex3.jpg" />
<img src="img/sex4.jpg" />
<img src="img/sex5.jpg" />
</div>

Логически связываем плагин с нашим #cycle

jQuery(function($) {
$('#cycle').cycle({
    fx:      'scrollDown',
    speedIn:  2000,
    speedOut: 500,
    easeIn:  'bounceout',
    easeOut: 'backin',
    delay:   -2000
});
});

Данный кусок кода можно сохранить как отдельный js файл, а затем вызывать его, чтобы не захламлять код страницы, либо просто вставить в вашу страницу, тем самым захламив код :)

Список эффектов:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle.
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

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

jQuery(function($) {
$('#cycle').cycle({
    fx:      'scrollLeft',
    speed:  1000,
    timeout: 2000
});
});

Здесь мы задали скорость смены слайдов и время показа одного слайда.
Опции:

  • 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 отключена

Опции. Управления:

  • 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 в этом случае привязывается к событию, а не прописывается в настройках эффекта.
Дополнительные опции:

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

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



Комментарии (0)

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 11 месяцев 2 дня назад
    Спасибо. С Новым Годом! 
  • Den 11 месяцев 3 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 11 месяцев 4 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 1 год 3 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 1 год 3 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 1 год 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 1 год 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 1 год 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 1 месяц назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 2 месяца назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!