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

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

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

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

</pre>
<div id="slideshow">
<ul>
	<li><img title="С Новым 2012 годом" src="images/1.jpg" alt="" /></li>
	<li><img title="С Новым 2012 годом" src="images/2.jpg" alt="" /></li>
	<li><img title="С Новым 2012 годом" src="images/3.jpg" alt="" /></li>
	<li><img title="С Новым 2012 годом" src="images/4.jpg" alt="" /></li>
	<li><img title="С Новым 2012 годом" src="images/5.jpg" alt="" /></li>
</ul>
</div>
<pre>

</pre>

<ul>

</ul>

</div>

<pre>

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

<!-- CSS -->

<!-- Бибилиотека jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<!-- Плагин Craftyslide --><script type="text/javascript" src="js/craftyslide.js"></script>

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

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

<script type="text/javascript">// <![CDATA[
   $("#slideshow").craftyslide();
// ]]></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);
}

#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). Определяет время показа слайда.

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

Интересно:

Print article

Опубликовал admin 29.12.2011 в 12:08, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Guest

Как на dle можно поменять?
- Karandash
  
  Попробуй подключить в таком состоянии как представлено в уроке, должно все работать.
Virik_ya

жаль что не ставиться(
- serj_ben
  
  А в чем, собственно, проблема?)
Svetlana

а можно, чтобы в этом слайд-шоу были и навигация и автоматический переход?

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

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи