Элегантный ротатор баннеров на 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: Поправил код, теперь после последнего слайда показывается снова первый. Также добавил несколько дополнительных опций для удобства