Все для веб-дизайнера
Организация слайд-шоу с помощью jQuery
Мы уже не раз рассматривали как создать различного слайд-шоу для сайта, различных форматов, функций, и вариантов организации. В данном уроке мы рассмотрим процесс создания элементарного слайд-шоу с помощью плагина jQuery, Craftyslide — маленькое слайдшоу (только 2kb), построенное на jQuery. Назначение Craftyslide — обеспечивать простой, без рюшечек, вывод изображений. Поэтому получился маленький, простой и эффективный плагин, который. Вот как это все будет выглядеть..
Для смены изображений используется плавное проявление, а для навигации — кнопочная панель. Первым шагом является разметка HTML, которая выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 |
</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> |
Создание данного слайд-шоу очень просте: создаем элемент div, который содержит элемент ul со списком изображений (смотрите приведнный выше код). Используйте атрибут title, если вы хотите выводить подписи к изображениям.
|
1 2 3 4 5 6 |
<!-- 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> |
Теперь инсталируем сам плагин следующей командой:
|
1 2 3 |
<script type="text/javascript">// <![CDATA[ $("#slideshow").craftyslide(); // ]]></script> |
Рассмотрим стили CSS, все достаточно просто на первый взгляд и в действии:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
#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). Определяет время показа слайда.
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 29.12.2011 в 12:08, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...