Создаем простое слайдшоу с помощью 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"

^ Наверх ^