Элегантный ротатор баннеров на jQuery

    Наверное каждый веб-мастер участвует в какой-либо партнерской программе и я не исключение. И для продвижения партнерских товаров все большей популярности набирают ротаторы баннеров. Пример такого ротатора Вы можете наблюдать на моем сайте в правом сайдбаре.

    Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный javascript-код. Если разбираться глубже, то задачей этого javascript-а является встраивание на Вашу страницу специального iframe, который уже и загружает ротатор баннеров на Вашу страницу с сайта разработчика.

    Все бы ничего, но у данного подхода есть несколько недостатков:

    • Уязвимость сайта. На Ваш сайт можно загрузить вредоносный код. Поэтому нужно доверять разработчикам, если Вы решили размещать их ротатор у себя на сайте
    • Вы зависите от сайта разработчика. Т.е. если сайт разработчика будет не доступен, то и ротатор баннеров не будет отображаться на Вашем сайте.
    • Увеличивается время загрузки страницы. Если посмотреть исходный код таких ротаторов баннеров, то мы можем увидеть, что там подключаются различные javascript-файлы и библиотеки, которые могут весит > 100кб. При этом некоторые библиотеки, такие как jQuery, уже могут быть подключены на Вашей странице, но браузеру придется загрузить её дважды.


    Все это наводило меня на мысли создать свой ротатор баннеров и не зависит ни от кого, а последним пинком под зад для меня послужило недавнее «падение» сайта Евгения Попова (ну или что там с ним было), ротатор которого я использую на этом сайте, из-за чего мой сайт долго загружался.

    В результате на свет появился мой собственный ротатор баннеров на jQuery, основным преимуществом которого является то, что для его работы не требуется дополнительных javascript-библиотек (кроме jQuery конечно) и весь html-код самого ротатора формируется за счет javascript-а в самом плагине. Что позволяет браузеру один раз закэшировать файл плагина и в дальнейшем брать его из кэша, а это увеличит скорость загрузки сайта.

    Для того чтобы использовать такой ротатор на своем сайте Вам необходимо первым делом подключить библиотеку jQuery и сам плагин. Но подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
    </script>
    
    <script type="text/javascript" src="js/jquery.rotator.js"></script>
    


    Данный код необходимо разместить между тегами на Вашем сайте.

    Останавливаться на этом я не буду, так как на эту тему у меня есть специальная статья «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google», скажу лишь что, используя такой подход, мы можем увеличить скорость загрузки страницы

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

    ul.slides_rotator{
        margin: 0;
        padding: 0;
        position: relative;
          list-style: none;
    }
    
    div.rotator{
        float: left;
        margin: 0 25px;
          position: relative;
    }
    
    a.rotator-nav{
        position: absolute;
        top: 50%;
        margin-top: -16px;
        z-index: 3;
        cursor: pointer;    
    }
    
    a.rotator-nav div{
        height: 32px;
        width: 32px;
        background: url('../images/nav.png')  no-repeat;    
    }
    
    #rotator-left{
        left:-16px;    
    }
    
    #rotator-left div{
        background-position: 0 0;    
    }
    
    #rotator-left:hover div{
        background-position: 0 -32px;    
    }
    
    #rotator-right{
        right:-16px;
    }
    
    #rotator-right div{
        background-position: -32px 0;    
    }
    
    #rotator-right:hover div{
        background-position: -32px -32px;
    }
    


    После того, как стили подключены можно приступать к вызову самого плагина ротатора. Для этого в том месте, где Вы хотите разместить ротатор пропишите следующий код:

    <div id='rotator'></div>
    


    Теперь можем вызывать сам плагин. Делается это следующим образом:

    <script type="text/javascript">
    $(function(){
        
        $('#rotator').rotator({
            slides: [
                    {
                        url:'http://1popov.ru/c/577/disc1',
                        img:'images/white200x450.jpg'
                    },
                    {
                        url:'http://1popov.ru/c/577/disc3',
                        img:'images/beige200x450.jpg'
                    },
                    {
                        url:'http://1popov.ru/c/577/disc5',
                        img:'images/sky200x450.jpg'
                    },
                    {
                        url:'http://1popov.ru/c/577/disc6',
                        img:'images/gold200x450.jpg'
                    },
                    {
                        url:'http://1popov.ru/c/577/disc8',
                        img:'images/green200x450.jpg'
                    },
                    {
                        url:'http://1popov.ru/c/577/disc11',
                        img:'images/black200x450.jpg'
                    }
            ],
            speed: 500,
            timeout: 3000,
            width: 200,
            height: 450,
            random: true, 
            autorun: true,
            fx: 'slide',
            nav: false
        });
    
    })
    </script>
    


    Как видно плагину мы передаем ряд параметров, а именно:

    • slides — массив слайдов, состаящий из объектов в которых задается партнерская ссылка — url, и картинка слайда — img
    • speed — скорость анимации в мсек.
    • timeout — время показа одного слайда в мсек.
    • random — если установить в true, то слайды будут выводится в хаотичном порядке
    • width — ширина одного слайда
    • height — высота одного слайда
    • fx — эффект анимации (slide — скольжение, fade — затемнение), по умолчанию — fade
    • autorun — автоматически прокручивать все слайды, по умолчанию — true
    • nav — отображать кнопки навигации, по умолчанию — false


    Демо страницу можно посмотреть здесь

    Исходники можно скачать здесь

    Вот такой вот простой плагин, для ротации Ваших баннеров. Надеюсь кому-то пригодится.

    UPD: Поправил код, теперь после последнего слайда показывается снова первый. Также добавил несколько дополнительных опций для удобства
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 11
      +1
      Интересное решение, но, могу ошибаться, по-моему jCarousel может тоже самое.
        +1
        Да не хотелось использовать навороченные плагины для такой простой задачи. Поэтому и написал довольно простой и компактный плагин.
        0
        Если баннер начал движение и нажать вправо — прокрутит на +1 баннер
          0
          Ну правильно. А как надо?
            0
            ну я заметил это просто: я нажал вправо, но сразу перед тем как баннер нажал баннер поехал. Получилось что перескочил один.
              0
              как предположение: если банер еще не прошел половину своей ширины, то листать на следующий; если прошел, то через один
            0
            Жаль, что он у вас по окончанию слайдов, возвращается в начало. Было бы прекрасно, если бы он в конце начинался бы показывать то, что было вначале.
              0
              Хм. Интересное предложение. Попробую реализовать.
                0
                Согласен. Немного пугает внезапная перемотка слайдов.
                  0
                  Поправил. Теперь слайды зациклины.
                  0
                  Скатите пожалуйста как подключить баннеры на флеше?

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое