Создаем простое слайдшоу с помощью jQuery

В сегодняшнем уроке Вы узнаете как сделать простое слайдшоу для показа Ваших фотографий.

Подобное слайдшоу может пригодиться любому вебмастеру.

demosourse

В самом начале документа подключаем фреймворк, таблицу стилей и вспомогательный скрипт:

<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
Просмотров: 59182
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^