понедельник, 6 августа 2012 г.

Пишем простейший слайдер на 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-рынка.