Создаем простое слайдшоу с помощью 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
Просмотров: 58894
Правила перепечатки

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Июля 2009 14:00
    Андрей
    Супер, спс за статью, мне понравилось!) Полезная штука)
  • 13 Июля 2009 22:07
    criminalist
    У меня вопрос !? могу ли я размечать ваши уроки на своем сайте с ссылкой на ваш сайт как источник ? заранее блогадорю за ответ!
  • 14 Июля 2009 07:38
    Arnold
    интересно, а как же сделать, чтобы этот скрипт работал после загрузки через ajax...
    • 12 Февраля 2011 19:37
      Игорь Дулин
      Что за ошибка [an error occurred while processing this directive] ????
  • 15 Июля 2009 18:18
    Алексей
    Прикольно.
  • 15 Июля 2009 22:43
    denkut
    Классная штуковина, поставлю обязательно на сайт! спасибо!
  • 27 Июля 2009 09:08
    Osken
    Здравствуйте, а как сделать так, чтобы было два разных комментария? Очень нужно
  • 27 Июля 2009 09:12
    Osken
    Один сверху, один снизу, например. спасибо
  • 11 Января 2010 12:41
    Ножи
    Классно! А как сделать, чтобы активация слайдшоу происходила при наведении мышки, а отключение при обратном?!
  • 1 Февраля 2010 11:26
    tima
    Спасибо, очень понравилось, подскажите пожалуйста как вывести на одну тсраницу 2 таких окна и чтобы они отображали разную информацию! ? Заранее благодарен!
  • 9 Марта 2010 18:34
    Динислам
    Отличный слайдер, главное простой в установке! Очень благодарен! Динислам Фатыхов, сайт http://denlam.ru
  • 19 Августа 2010 00:57
    jm
    помогите разобратся!! слайдер не работает. Почему-то броузер не берёт display: none. Где искать проблему? первая картинка появляется а дальше не идёт. Как проверить насколько правильно подключение? Спасибо заранее
  • 28 Апреля 2011 14:58
    joe1989
    Подскажите как убрать черную полосу с комментариями?
  • 7 Октября 2011 14:56
    Илья Седов
    отличный слайд шоу! Всё просто и удобно
  • 6 Декабря 2011 23:23
    Михаил Каретов
    Спасибо
  • 24 Апреля 2012 19:25
    kpect
    Как убрать вокруг отступы?
  • 7 Мая 2012 15:34
    Slonoritsar
    пригодилось
  • 14 Мая 2012 03:39
    makar
    Привет,как сделать авторизацию на сайт,как у тебя,пожалуйста.Гуглил ни черта не нашел.Полез за одним - увидел другое.
  • 18 Марта 2013 23:48
    apollo100
    как изменить время смены изображения
  • 8 Августа 2013 16:38
    nastya123456
    а как можно увеличить размер картинок слайда???
  • 3 Апреля 2014 22:26
    KuPuJl
    Вот не понимаю как поставить его к себе
^ Наверх ^