Ротатор баннеров на jQuery

Для продвижения партнерских товаров все большей популярности набирают ротаторы баннеров или изображений.

Для того, чтобы разместить ротатор на своем сайте, достаточно установить специальный javascript-код.

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

Недостатки данного метода:

1. Уязвимость сайта.

На сайт можно загрузить вредоносный код.

Необходимо размещать код только проверенных партнеров.

2. Зависимость от сайта партнера.

Если сайт партнера будет недоступен, то ротатор баннеров не будет отображаться на сайте.

3. Увеличивается время загрузки страницы.

Если посмотреть исходный код таких ротаторов баннеров, то можно увидеть, что там подключаются различные javascript-файлы и библиотеки, которые могут весить более 100кб.

Представляю ротатор картинок на jQuery, для работы которого не требуется дополнительных javascript-библиотек и весь html-код самого ротатора формируется за счет javascript-а в самом плагине.

Это увеличит скорость загрузки сайта, т.к. браузер один раз закэширует файл плагина и в дальнейшем будет брать его из кэша.

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

Подключать библиотеку jQuery будем с репозитория Google.

Данный код необходимо разместить между тегами <head></head> на сайте.

Подключаем стили:

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

В том месте, где необходимо разместить ротатор, прописываем следующий код:

Теперь можем вызывать сам плагин.

Делается это так:

Параметры плагина:

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

Вот такой вот простой плагин для ротации Ваших баннеров.

А у меня на этом все, до новых встреч.

С уважением, Сергей Кривцов


Понравилась статья? Поделитесь с друзьями!

Читайте также на моем блоге:

Подписка на обновления блога: