|
Сегодня мы поговорим о 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="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://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="https://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="https://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="https://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="https://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="https://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 // задержка в мс для изменения очередности
};
Комбинируя эти значения можно получать самые разнообразные слайдшоу. Но об этом в следующий раз.
|
Комментарии
Пригодилось.