Готовый скрипт ротатор баннеров для вашего сайта

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

 

Что такое ротатор баннеров?

По своей сути это все те же рекламные баннеры, которые самостоятельно перелистываются. Преимущество такого решения — экономия места. Там где раньше был один баннер, теперь можно разместить множество.

В нашем скрипте есть все необходимое:

  • кнопки перелистывания баннера
  • автоматическое перелистывание баннеров. Время задержки, вы можете установить сами
  • возможность изменять размер ротатора
  • возможность установить множество ротаторов с разным содержимым

А главное его легко использовать, от вас потребуется несколько простых действий

Подключение ротатора баннеров на ваш сайт

1. Скачайте архив

2. Разархивируйте скрипт в удобную папку. Дайте ей название, для наглядности пускай она называется test

3. Подключите скрипты в head секцию вашего сайта

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/test/js/banner-rot.js"></script>

 

4. Перенесите стили из файла /test/styles/styles.css в основную таблицу стилей вашего сайта.

Либо удалите из этого файла стиль для тега body и, подключите стили с помощью ссылки

<link href="/test/styles/styles.css" rel="stylesheet" type="text/css" />

 

5. залейте нужные баннеры в папку /test/images/ 

Обязательно указав формат изображения
Важно понимать, что /test/ — это название папки, куда вы распаковали исходник скрипта ротатора баннеров

6. Перед закрывающим тегом добавьте следующий код

<script type="text/javascript">
$(function(){   
$('#banner-rot1').rotator({fx:'slide',autorun: true, nav: true});	})
</script>
 
<script type="text/javascript">
$(function(){
$('#banner-rot1').rotator({
slides: [
{url:'/',img:'images/3.jpg'},// заменить ссылку и картинку на свои, количество не ограничено
{url:'/',img:'images/4.jpg'} // после последнего запятую не ставить
],
});
})
</script>

 

В первой части кода, мы передаем параметры работы слайдера. Подробно, о каждом, мы написали в файле скрипта, к каждой строке есть комментарий. 

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

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

<div class="rotator" id="banner-rot1"></div>

Пример работы скрипта ротатора баннеров можно увидеть на demo странице. Исходники с подробным описанием можно скачать тут

Поделиться в социальных сетях
Поделиться ВКонтакте Поделиться ВКонтакте
Поделиться в Facebook Поделиться в Facebook
Добавить в Twitter Добавить в Twitter