« Плагин Cycle для библиотеки jQuery. Часть 1
Плагин Cycle для библиотеки jQuery. Часть 3 »

Плагин Cycle для библиотеки jQuery. Часть 2

27 Октябрь 2008, 13:52

Опция delay устанавливает количество миллисекунд, которые надо добавить к значению timeout при первой смене кадров. Т.е. слайдшоу будет запущено через timeout+delay миллисекунд после загрузки страницы. Эта опция будет полезна, если вы планируете разместить на одной странице несколько слайдшоу, чтобы они запускались по очереди.

Для использования опции easing требуется подключить к странице jQuery Easing Plugin (мы уже сделали это). Опция задает дополнительные эффекты перехода при смене изображений:

  • easein
  • easeinout
  • easeout
  • expoin
  • expoout
  • expoinout
  • bouncein
  • bounceout
  • bounceinout
  • elasin
  • elasout
  • elasinout
  • backin
  • backout
  • backinout
  • linear

Опция sync определяет, как следующий кадр слайдшоу будет заменять текущий. Если используется значение по умолчанию false, следующий кадр появляется после того, как исчезнет текущий. Если использовать значение true, следующий кадр начнет появляться еще до того, как исчезнет предыдущий.

Эффект shuffle сменяет кадры слайдшоу как при перетасовке карт. Для использования эффекта необходимо передать методу cycle() объект настроек, где будет определено свойство shuffle с координатами. Значения по умолчанию:

{ top: 15, left: width_of_container }

Есть возможность организовать смену кадров по щелчку кнопкой мыши. Опции prev и next служат для указания элемента, при щелчке по которому будет показан следующий/предыдущий кадр. Если опция timeout=0, то смена кадров будет происходить только по щелчку кнопкой мыши.

Можно совмещать автоматическую смену кадров (опция timeout не равна нулю) и смену кадров по щелчку кнопкой мыши. На странице демонстрации можно видеть пример, где кадры сменяются автоматически каждые три секунды, просмотр останавливается при наведении указателя мыши, и можно просматривать кадры по щелчку кнопкой мыши.

Опция pager используется для создания панели навигации: можно перейти к любому кадру слайдшоу. Опция предписывает плагину создать панель навигации - контейнер, который содержит ссылки на все кадры слайдшоу.

При использовании опции pager плагин сформирует элементы навигации в виде якорей, для которых можно определить стиль:

#nav a { background-color: #fc0 }

Для активного элемента навигации можно определить класс activeSlide:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

Чтобы остановить показ слайдшоу, передайте методу cycle() строку ’stop’:

$('#slideshow').cycle('stop');

Чтобы приостановить/продолжить показ слайдшоу, надо передать методу cycle() строку ‘pause’/'resume’:

$('#slideshow').cycle('pause');

Плагин позволяет вызвать пользовательскую функцию перед или после смены кадра:

$('#s5').cycle({
    fx:     'scrollLeft',
    timeout: 5000,
    before:  onBefore,
    after:   onAfter
});

Примеры функций:

function onBefore() {
    $('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
}

Ссылки по теме:

Рубрика: JavaScript  |  Отзывы (RSS)  |  Трекбек

Комментариев: 2

  1. Рафаэль:

    Добрый вечер!
    Не подскажете, как сделать, чтоб при загрузке страницы zoom’ом появились 3 картинки по очереди, и остановились на этом.
    Т.е. я использую такой вариант:

    $('#s2').cycle({fx: 'zoom', sync:0, delay: -1000 });

    Сначала появляется из ничего картинка, потом это поворяется, хочется чтоб не повторялось.
    Я конечно нуб в яве и не могу понять как передать “$(’#slideshow’).cycle(’stop’);”
    Заранее большое спасибо :)

    26 Май 2009, 21:32

  2. admin:

    Рафаэль:

    $('#s2').cycle({
        fx:            'zoom',
        sync:          0,
        delay:         -1000,
        autostop:      1,
        autostopCount: 3
    });
    3 Июнь 2009, 19:15

Оставьте свой отзыв