Ротатор баннеров. Скрипты. Блог. Портал SzenProgs
 

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

Скрипты

Рисунок Ротатор баннеров
Ротатор баннеров Ротатор баннеров
оценка: 5.0 из 5
оценок: 15

Каждый владелец сайта хочет получать прибыль. Поэтому многие торгуют рекламными местами и размещают на своем сайте баннеры. Иногда возникает необходимость на одном рекламном месте показывать несколько баннеров. Если просто вписать все баннеры в одном месте, то получится захламление сайта рекламой. Выход из этой ситуации есть. Для этого можно воспользоваться скриптом ротатора баннеров, или крутилки баннеров. Такой скрипт будет периодически менять баннеры на одном рекламном месте. При этом, сами баннеры не будут вписаны в HTML-код сайта, и, соответственно, не будут утекать такие важные составляющие как ТИЦ и PR.

Для работы данного скрипта ротатора баннеров не нужны фреймворки типа jQuery и тому подобные. Скрипт основан на чистом JavaScript и работает в любом современном браузере.

Пример работы ротатора баннеров Вы можете увидеть ниже.

Рабочий пример:





Теперь займемся размещением скрипта ротатера баннеров на страницу сайта.

Для начала нужно разместить следующий код в тело HEAD сайта. При желании, скрипт можно вынести в отдельный js-файл.

Code
<script type="text/javascript"><!--
  $rotator = {
    banners: [
      {url: 'http://svalka.szenprogs.ru', img: 'http://szenprogs.ru/img/posts/002/1.jpg', title: 'Интересное'},
      {url: 'http://soft-block.ru', img: 'http://szenprogs.ru/img/posts/002/2.jpg', title: 'Популярный софт'},
      {url: 'http://egame.szenprogs.ru', img: 'http://szenprogs.ru/img/posts/002/3.jpg', title: 'Игры для эмуляторов'},
      {url: 'http://cookerz.ru', img: 'http://szenprogs.ru/img/posts/002/4.jpg', title: 'Кулинарная книга'}
    ],
    options: {
      width: '468',
      height: '60',
      target: '_blank',
      time: 5000
    },
    num: 0,
    exec: function(id){
      document.getElementById(id).innerHTML = '<a href="' + this.banners[this.num].url + '" title="' + this.banners[this.num].title + '" target="' + this.options.target + '"><img src="' + this.banners[this.num].img + '" width="' + this.options.width + '" height="' + this.options.height + '" alt="' + this.banners[this.num].title + '"><\/a>';
      if(this.num < this.banners.length - 1){
        this.num ++;
      }else{
        this.num = 0;
      }
    },
    ready: function(id){
      var loadevent = window.onload;
      window.onload = function(){
        if(typeof loadevent == 'function') loadevent();
        $rotator.exec(id);
        window.setInterval(function(){
          $rotator.exec(id);
        }, $rotator.options.time);
      }
    }
  }
  $rotator.ready('banner');
  //-->
</script>

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

Code
<div id="banner">здесь размещен <a href="http://szenprogs.ru/blog/rotator_bannerov/2012-08-26-142">ротатор баннеров</a></div>

Теперь разберем параметры скрипта ротатора баннера и настроем его под себя.

Список прокручиваемых баннеров находится в массиве banners. Их количество не ограничено. Каждый элемент массива состоит из объекта со следующими параметрами:

  • url - ссылка на рекламируемую страницу;
  • img - ссылка на баннер. Баннеры желательно хранить на собственном хосте;
  • title - подсказка к баннеру. Будет отображаться, если навести курсор на баннер, или при отключенном отображении картинок.

Основные параметры находятся в объекте options:

  • width - ширина баннеров в пикселях;
  • height - высота баннеров в пикселях;
  • target - метод перехода по ссылке баннера. _blank - в новом окне. _top - в текущем окне;
  • time - промежуток времени, через которое будут менятся баннеры. Измеряется в миллисекундах. В коде это 5000 миллисекунд = 5 секунд.

После настройки скрипта ротатора баннеров он должен сразу заработать. Если что-то не получается - пишите.

На этом все. Подписывайтесь! Ставьте звездочки! Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Ротатор баннеров
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:7731
Рейтинг:5.0/15
Дата добавления:2012-08-26 18:04, Воскресенье
Добавил:Szen
Теги:баннер, Ротатор, баннеры, крутилка

Мини-форум

№ 02012-08-26 18:04
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Ротатор баннеров".
Гость
Учавствовать в обсуждении "Ротатор баннеров" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Заработок
Опрос
Ваша оценка дизайна
Всего ответов: 1199
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz