Скрипт JavaScript для вывода слайд шоу - Presentation cycle

Cycle - скрипт, с помощью которого легко создать презентации нескольких изображений. Скрипт поддерживает большой набор эффектов и элементов цикла.

Presentation Cycle - вариация функционала Cycle. Вместо списка номеров слайдов, Presentation Cycle автоматически генерирует индикатор прогресса, который показывает время появления нового слайда.

Слайдшоу с идикатором прогресса

Особенности

  • Циклический показ изображений.
  • Настраиваемое время анимации.
  • Генерация индикатора навигации, который отображает время показа слайда.
  • Работает в современных браузерах.

 

Как использовать скрипт

Подключаем к странице все необходимые библиотеки и скрипты:

<head>
    <!-- Таблицы стилей -->
    <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />

    <!-- Скрипты -->
    <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='js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='js/presentationCycle.js'></script>
</head>

Создаем контейнер, который содержит элементы для Cycle:

<div id="presentation_container" class="pc_container">

	<div class="pc_item">
		<div class="desc">
			<h1>Заголовок</h1>
			<!-- Здесь можно разместить описание. -->
		</div>
		<img src="images/slide1.jpg" alt="slide1" />
	</div>

	<!-- ... Другие слайды нашей презентации -->

</div>

Контейнер с элементами цикла имеет id “presentation_container”, что соответствует использованию установок по умолчанию в скрипте и таблице стилей. Вложенные элементы имеют класс “pc_item”, что также соответствует использованию установок по умолчанию.

После контейнера вставляем вызов скрипта:

<script type="text/javascript">
    presentationCycle.init();
</script>

Для запуска скрипта с установками по умолчанию описанных действий достаточно.

 

Настройки

Сначала разберемся, как настраивать изображения, которые используются для генерации индикатора прогресса.

Код Javascript в файле presentationCycle.js содержит следующую секцию, касающуюся изображений, используемых скриптом (строка 19):

// Опции индикатора прогресса
barHeight: 14, 					// Высота полоски индикатора
barDisplacement: 20,				// Смещение индикатора
barImgLeft: "images/pc_item_left.gif",		// Изображение для левой части
barImgRight: "images/pc_item_right.gif",	// Изображение для правой части
barImgCenter: "images/pc_item_center.gif",	// Изображение для центральной части
barImgBarEmpty: "images/pc_bar_empty.gif",	// Изображение для пустой полоски
barImgBarFull: "images/pc_bar_full.gif",	// Изображение для заполненной полоски

Высота полоски определяется в пикселях. Она должна быть такой же как и высота изображений, которые хранятся в папке images. Изображения являются спрайтами, которые включают в себя версии для активного и пассивного состояния.

Для выравнивания изображений нужно сделать два одинаковых квадрата расположенных рядом. Левая часть используется для пассивного состояния, а правая - для активного состояния.

Нужно, чтобы все изображения имели одинаковую высоту, которая соответствует высоте полоски индикатора.

Cмещение индикатора  barDisplacement комбинируется из отступа + поле полоски.

Для использования пользовательских настроек можно задействовать следующий код вызова плагина, который снимает необходимость вносить правки в текст JavaScript файла:

presentationCycle.barHeight = 10; // Отличные от установок по умолчанию значения 
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif";

presentationCycle.init(); // Запускаем скрипт

Для настроек параметров цикла, используются следующие установки:

// Опции слайдов
slideTimeout: 8000,
containerId: "presentation_container",

//Опции цикла 
cycleFx: 'scrollHorz',
cycleSpeed: 600,

slideTimeout  -  время демонстрации слайда.
containerId  - контейнер с элементами цикла.
cycleFx  - эффект перехода между слайдами, используются плагина Cycle. cycleSpeed - скорость анимации перехода между слайдами.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^