html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Пишем простейший слайдер на jQuery

Начал изучение jQuery. Сделал простой слайдер. В планах - сделать генератор слайдеров с back-end'ом на Django. Вот исходники слайдера (можете считать, что лицензия GNU GPL :-) ):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изучаем jQuery</title>
        <!-- подключаем JQuery -->
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <!-- jQuery Timers - плагин для таймеров -->
        <script type="text/javascript" src="js/jquery.timers.js"></script>
        <!-- Стиль лучше класть в отдельный файл, как и скрипт. Но здесь, для наглядности примера, я слил всё в один файл -->
        <style>
            .invisible{
                display: none;
            }
        </style>
        <script type="text/javascript">
            /* когда документ будет загружен, начнётся выполение анонимной функции */
            $(document).ready(function(){
                var active = 1; // индекс следующего отображаемого слайда
                $(document).everyTime(5000, function(){ /* каждые 5 секунд. Функция взята из плагина jQuery Timers */
                    $("#slider dt").each(function(i){ /* обходим все элементы немаркированного списка */
                        if (i != active) $(this).slideUp(); /* анимированно убрать слайд, если он не активный */
                        else $(this).slideDown(); /* иначе анимированно показать слайд */
                    });
                    /* вычисляем, какой слай будет следующий */
                    if (active != 2) active++;
                    else active = 0;
                });
            });
        </script>
    </head>
    <body>
        <p>
            Простейший слайдер на jQuery.
        </p>
        <div id="slider">
            <dl>
                <dt>
                    <img src="img/apple.jpg" />
                    <br />
                    <span>Apple Computers</span>
                </dt>
                <dt class="invisible">
                    <img src="img/google.jpg" />
                    <br />
                    <span>Google Incorporated</span>
                </dt>
                <dt class="invisible">
                    <img src="img/microsoft.jpg" />
                    <br />
                    <span>Microsoft Corporation</span>
                </dt>
            </dl>
        </div>
    </body>
</html>

Для того, что бы слайдер заработал, понадобиться скачать jQuery, плагин к нему jQuery Timers и фотки. У меня они размером 640x480. Искал через Google по названиям трёх гигантов IT-рынка.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с polukoder.blogspot.com

39
    +21 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • kosc
          • домен polukoder.blogspot.com
          • домен blogspot.com

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции