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

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

demoСкачать

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

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

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

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

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

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

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 странице. Исходники с подробным описанием можно скачать тут

Поделиться в социальных сетях:

Еще по теме

Комментарии к материалу

  1. работать то оно работает

    а вот как сделать вариации не только числа ротаторов, но и размеров баннеров ?!

  2. открыть таблицу стилей, добавить нужный класс и изменить размер

  3. Спасибо!

    туда я не подумал....

    сработал с этим блоком:

    speed: 500, //скорость анимации в мсек.

    timeout: 3000, //время показа одного слайда в мсек.

    width: 400, //высота

    height: 250, // ширина

    random: true, //если установить в true, то слайды будут выводится в хаотичном порядке

    autorun: true, //автоматически прокручивать все слайды, по умолчанию — true

    fx: 'fade', //эффект анимации (slide — скольжение, fade — затемнение), по умолчанию — fade

    nav: true //отображать кнопки навигации, по умолчанию — false

    в ротаторе он стоит как переменная в позе «default»

    а подставляя его в блоке кода вызова — даем фактический аргумент вместо переменной по умолчанию

    а вот очень жизненно-важный крестик «погасить новое окошко», которое закрывает весь экран и весьма тяготит зрителей на мобильниках — пока никак не получается...

  4. И еще один интересный момент

    встали наконец два ротатора на одну страницу

    только показывают всего по 2 слайда каждый

    в одном при этом 6 а в другом 7

    F5 решает проблему — остается стартовый слайд, а вместо второго ставится новый из списка...

    интересный глюк...

  5. Михаил, это больше похоже, что стили у вас плохо подгружаются. На демо странице ни каких проблем нет, слайды разные и листаются независимо. Похоже, вы подключили что-то не совсем верно. В любом случае, каждый скрипт, требует доработки под конкретный сайт. Подключение библиотек, проверка чтобы ни чего не конфликтовало и стили не пересекались.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *