Главная » 2012 » Август » 28 » Ротатор баннеров (Javascript)
28.08.2012, 14:58

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




Каждый владелец сайта хочет получать прибыль. Поэтому многие торгуют рекламными местами и размещают на своем сайте баннеры. Иногда возникает необходимость на одном рекламном месте показывать несколько баннеров. Если просто вписать все баннеры в одном месте, то получится захламление сайта рекламой. Выход из этой ситуации есть. Для этого можно воспользоваться скриптом ротатора баннеров, или крутилки баннеров. Такой скрипт будет периодически менять баннеры на одном рекламном месте. При этом, сами баннеры не будут вписаны в 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
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 секунд.

После настройки скрипта ротатора баннеров он должен сразу заработать.
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://szenprogs.ru
Категория: JavaScript's | Просмотров: 2814 | Добавил: sold93 | Рейтинг: 5.0/4 |
Теги: ротатор, баннеров
Всего комментариев: 1
+1   Спам
1 sold93 -Infoscript Team-  (28.08.2012 15:05)
Аватар пользователя
пожалуйста, не надо только комментов в стиле "легче пользоваться стандартным юкозовским ротатором" и т.п. Это для тех, у кого другой движок (без встроеного ротатора).

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]