Создаем простое слайдшоу с помощью jQuery
В сегодняшнем уроке Вы узнаете как сделать простое слайдшоу для показа Ваших фотографий.
Подобное слайдшоу может пригодиться любому вебмастеру.
В самом начале документа подключаем фреймворк, таблицу стилей и вспомогательный скрипт:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
Далее создаем HTML структуру, при этом все фотографии публикуем в виде неупорядоченного списка. Описание к фотографиям помещаем в тег <span>.
<div id="s3slider">
<ul id="s3sliderContent">
<li style="display: none;" class="s3sliderImage">
<img src="imgs/img1.png">
<span style="display: none;">Scooby Doo Van</span>
</li>
<li style="display: list-item;" class="s3sliderImage">
<img src="imgs/img2.png">
<span style="display: block;">Ambulance</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
После этих действий наше слайдшоу готово. Все очень просто и легко.
В первом отрезке кода находится такой параметр как timeOut - его можно менять и тем самым Вы сможете ускорить или замедлить слайдшоу.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.evanriley.xiaimix.com
Перевел: Максим Шкурупий
Урок создан: 12 Июля 2009
Просмотров: 59340
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.