Cycle jQuery Plugin часть 1

Сегодня мы поговорим о Cycle, плагине для  jQuery. Он предназначен для создания всяких разных прокруток html блоков. Например, на его основе  была сделана циклическая презентация в одной из моих заметок.Итак, первым делом качаем файл плагина отсюда.Рассмотрим код простейшего примера. Посмотреть его в действии можно тут.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>
</head>
<body>
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    </div>
</body>
</html>

Весь функционал плагина сосредоточен в методе cycle, который надо определить у элемента контейнера. Все дочерние элементы контейнера будут считаться "слайдами". В качестве аргумента мы передаем в метод настройки плагина. В примере это делается так:

<script type="text/javascript">
$(document).ready(function() 
    $('.slideshow').cycle({
        fx: 'fade' 
}); }) </script>

В этом блоке кода мы определяем метод cycle для блока slideshow. Он у нас становиться контейнером, а все дочерние элементы становятся "слайдами". В качестве аргумента мы передаем структуру, в которой задаем параметры отображения. Приведу полное ее описание:

// переопределите значения по умолчанию, если хотите

// переопределите значения по умолчанию, если хотите

$.fn.cycle.defaults = { 
    fx:           'fade', // название эффекта при смене слайдов (или перечисление нескольких эффектов, разделенные запятыми)
    timeout:       4000,  // время в миллисекундах между сменами слайдов (если равно 0, то автосмена отключена) 
    timeoutFn:     null,  // функция, вызываемая при смене слайдов:  function(currSlideElement, nextSlideElement, options, forwardFlag) 
    continuous:    0,     // Если  true, то картинка сменяется без задержки
    speed:         1000,  // Скорость анимации смены слайда
    speedIn:       null,  // Скорость "появления" слайда 
    speedOut:      null,  // Скорость "исчезновения" слайда 
    next:          null,  // селектор элемента, который будет использоваться в качестве кнопки "следующий"
    prev:          null,  // селектор элемента, который будет использоваться в качестве кнопки "предыдущий"
    prevNextClick: null,  // функция, вызываемая при клике на след/пред кнопки:  function(isNext, zeroBasedSlideIndex, slideElement) 
    pager:         null,  // селектор элемента используемый в качестве пагинатора
    pagerClick:    null,  // функция, вызываемая при клике на пагинатор:  function(zeroBasedSlideIndex, slideElement) 
    pagerEvent:   'click', // событие, при котором срабатывает пагинатор 
    pagerAnchorBuilder: null, // функция, вызываемая при создании анкоров:  function(index, DOMelement) 
    before:        null,  // функция, вызываемая до смены слайда:     function(currSlideElement, nextSlideElement, options, forwardFlag) 
    after:         null,  // функция, вызываемая после смены слайда:  function(currSlideElement, nextSlideElement, options, forwardFlag) 
    end:           null,  // функция, вызываемая при окончании слайдшоу (используйте вместе с autostop или nowrap): function(options) 
    easing:        null,  // метод, используемый для "смягчения" анимации 
    easeIn:        null,  // смягчение анимации пря появлении слайда
    easeOut:       null,  // смягчение анимации при исчезновении слайда
    shuffle:       null,  // координаты для эффекта перемешивания, например: { top:15, left: 200 } 
    animIn:        null,  // свойство, определяющее появление слайда 
    animOut:       null,  // свойство, определяющее исчезновение слайда 
    cssBefore:     null,  // свойство, определяющее начальное состояние слайда до анимации 
    cssAfter:      null,  // свойство, определяющее конечное состояние слайда после завершения анимации 
    fxFn:          null,  // функция для контроля анимации: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag) 
    height:       'auto', // высота контейнера
    startingSlide: 0,     // индекс первого слайда 
    sync:          1,     // если true, то анимации появления и исчезновения слайда начнуться одновременно 
    random:        0,     // если true то слайды будут сменять в случайном порядке 
    fit:           0,     // подгонка слайдов под контейнер
    containerResize: 1,   // контейнер будет иметь размер самого большого слайда 
    pause:         0,     // если true, то при наведении на слайд мышкой, он не будет сменяться
    pauseOnPagerHover: 0, // если true, то при наведении на пагинатор, слайды не будут меняться
    autostop:      0,     // если true, то слайдшоу закончиться после X сладов (гле Х - количество слайдов) 
    autostopCount: 0,     // число смен слайдов (может использоваться с autostop для определения Х)
    delay:         0,     // Дополнительная задержка (в миллисекундах) для первой смены слайда(может быть отрицательной) 
    slideExpr:     null,  // правило для определения слайдов (если нужно отличное от "все дочерние элементы") 
    cleartype:     !$.support.opacity,  // елси true, то clearType будет включен (для IE) 
    cleartypeNoBg: false, // clearType для фона слайда 
    nowrap:        0,     // true to prevent slideshow from wrapping 
    fastOnEvent:   0,     // быстрая смена слайда при ручной смене (кнопками след/прев или пагинатором)значение равно времени в мс 
    randomizeEffects: 1,  // используется когда задано несколько эффектов смены слайдов
    rev:           0,     // если true, слайды будут идти в обратном порядке
    manualTrump:   true,  // при ручной смене слайдов, активная в данный момент анимация останавливается
    requeueOnImageNotLoaded: true, // изменение очередности слайдов, если какое-либо изображение не прогрузилось 
    requeueTimeout: 250   // задержка в мс для изменения очередности
};

Комбинируя эти значения можно получать самые разнообразные слайдшоу. Но об этом в следующий раз.

 

Тэги :

1 Комментариев

    Элементы 1—1 из 1.
  1. kenterberiiskii
    линк на пример ведет на главную

Оставьте комментарий

Мы не опубликуем ваш email

Scroll To Top