Главная страница » jQuery » Организация слайд-шоу с помощью jQuery

Организация слайд-шоу с помощью jQuery

Мы уже не раз рассматривали как создать различного слайд-шоу для сайта, различных форматов, функций, и вариантов организации. В данном уроке мы рассмотрим процесс создания элементарного слайд-шоу с помощью плагина jQuery, Craftyslide — маленькое слайдшоу (только 2kb), построенное на jQuery. Назначение Craftyslide — обеспечивать простой, без рюшечек, вывод изображений. Поэтому получился маленький, простой и эффективный плагин, который. Вот как это все будет выглядеть..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Для смены изображений используется плавное проявление, а для навигации — кнопочная панель. Первым шагом является разметка HTML, которая выглядит так:

</pre>

<ul>

</ul>

</div>

<pre>

Создание данного слайд-шоу очень просте: создаем элемент div, который содержит элемент ul со списком изображений (смотрите приведнный выше код). Используйте атрибут title, если вы хотите выводить подписи к изображениям.

<script type="text/javascript" src="js/craftyslide.js"></script>

Теперь инсталируем сам плагин следующей командой:

$("#slideshow").craftyslide();

// ]]></script>

Рассмотрим стили CSS, все достаточно просто на первый взгляд и в действии:

#slideshow {

margin:0;

padding:0;

position:relative;

border:15px solid #fff;

-webkit-box-shadow:0 3px 5px #999;

-moz-box-shadow:0 3px 5px #999;

box-shadow:0 3px 5px #999;

}

#slideshow ul {

position:relative;

overflow:hidden;

margin:0;

padding:0;

}

#slideshow ul li {

position:absolute;

top:0;

left:0;

margin:0;

padding:0;

list-style:none;

}

#pagination {

clear:both;

width:75px;

margin:25px auto 0;

padding:0;

}

#pagination li {

list-style:none;

float:left;

margin:0 2px;

}

#pagination li a {

display:block;

width:10px;

height:10px;

text-indent:-10000px;

background:url(../images/pagination.png);

}

#pagination li a.active {

background-position:0 10px;

}

.caption {

width:100%;

margin:0;

padding:10px;

position:absolute;

left:0;

font-family:Helvetica, Arial, sans-serif;

font-size:14px;

font-weight:lighter;

color:#fff;

border-top:1px solid #000;

background:rgba(0,0,0,0.6);

}

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

width (число)- Задает ширину слайдшоу.
height (число)- Задает высоту слайдшоу.
pagination (true/false)- Определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.
fadetime (число)-Определяет скорость анимации смены слайдов.
delay (число)-Используется в автоматическом режиме(при значении опции pagination false). Определяет время показа слайда.

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