Нашел в сети прикольную реализацию сабжа. Основана она на Cycle, плагине для jQuery. Служит он для реализации всяких штук с зацикливанием всяких HTML блоков. О нем я возможно напишу в следующий раз. Ссылка интересующимся. Но вернемся к нашему слайдшоу.
Настройка скрипта
Первое, что понадобиться это вставить следующий код внутрь тэга <head>
<head>
<!-- Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
<!-- Scripts -->
<script type='text/javascript' src='https://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>Description title</h1>
You can put your description in here.
</div>
<img src="images/slide1.jpg" alt="slide1" />
</div>
<!-- ... repeat the previous item -->
</div>
И последний шаг - дописываем следующий код:
<script type="text/javascript">
presentationCycle.init();
</script>
Настройка внешнего вида
Теперь рассмотрим внутренности файла js/presentationCycle.js
С нем мы задаем структуру для Cycle. Детали опустим, они выходят за рамки данной заметки.
Первый интересный нам кусок кода находиться на 18 строке:
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. Изображения содержат как пустую версию элемента, так и заполненную. Это сделано для более быстрой загрузки страницы.
Изображения должны быть одинаковой высоты для правильного позиционирования полосы. Также следует убедиться, что та же высота установлена в скрипте.
barDisplacement является суммой padding-а и margin-а.
Для внесения изменений в настройки нет необходимости менять сам Javascript файл. Просто после задания контейнера для Cycle можно вставить код с изменением настроек. Пример:
//Настройки полосы прокрутки presentationCycle.barHeight = 10; //тут изменяем высоту полосы presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //а тут меняем изображение presentationCycle.init(); //запуск скрипта
Для настройки параметров цикла, надо задать следующие переменные:
//настройки прокрутки slideTimeout: 8000, // интервал смены слайда containerId: "presentation_container", // контейнер в котором содержаться сменяющиеся изображения //настройки для Cycle cycleFx: 'scrollHorz', // тип эффекта cycleSpeed: 600, // скорость смены слайда
Вот собственно и все.
0 Комментариев