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

ГлавнаяJava скрипты → Ротатор баннеров

Здесь я вам хочу рассказать об очень простом, и в то же время надёжном, работающим в основных браузерах скрипте - Ротатор баннеров. Плюсом подобных скриптов разумеется является: экономия места на странице и посетителю не мельтешит в глаза огромная охапка баннеров.

Преимуществом данного скрипта является ещё то, что он показывает любое количество баннеров, где вы легко в настройке укажите время их показа необходимое для вас.

Работу скипта - вы можете наблюдать в верху в шапке сайта на любой странице и так же в левом блоке "Партнёры". Если работу ротатора баннеров вы не наблюдаете, то это значит одно - места под баннеры выкупили рекламодатели с определённых сервисов (у них своя система показов баннеров). Размеры под баннеры вы выставляете абсолютно под любой формат, и на одной странице, как вы сами видите, можно устанавливать любое количество скриптов.

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

Код перед закрывающимся тегом </head>


<script type="text/javascript">
var imgs1 = new Array("http://1_баннер.gif","http://2_баннер.gif","http://3_баннер.gif");
var lnks1 = new Array("http://ссылка_ с_1-го_баннера","http://ссылка_ с_2-го_баннера","http://ссылка_ с_3-го_баннера");
var alt1 = new Array("на_1-ый_баннер","на_2-ой_баннер","на_3-ий_баннер");
var title1 = new Array("на_1-ый_баннер","на_2-ой_баннер","на_3-ий_баннер");
var currentAd1 = 0;
var imgCt1 = 3;
function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  banner1.title=title1[currentAd1]
  document.getElementById('adLink1').href=lnks1[currentAd1]
  currentAd1++;
}
  window.setInterval("cycle1()",10000);
</script>

В этом примере я вам показал скрипт Ротатор баннеров из 3-ёх баннеров.

Теперь подробнее: в первой строке скрипта вы указываете адреса на нужные вам баннеры, вторая строка это соответсвенно ссылки ведущие посетителя при клике баннеров на нужные страницы. Следующие две строки - это ALT и TITLE как и в обычных баннерах, или картинках.

Далее нас интересует вот эта стока var imgCt1 = 3; - в ней мы как раз и указываем количество отображаемых баннеров в ротаторе. Поэтому не забывайте, после того как добавили адреса и ссылки на баннер, обязательно изменять это значение.

И последнее, что нас интересует - это последняя строка в скрипте, где мы изменяем под себя показы баннеров по времени. В данном случае стоит 10000 милисекунд, что приравнивается к 10 секундам (для тех кто не знает). Вы соответственно изменяете показ на своё усмотрение.

И последнее, это прописываем следущий код в нужное место страницы, где будет отображаться сам Ротатор баннеров

Код для html


<a href="http://ссылка_ с_1-го_баннера" id="adLink1" target="_blank">
<img src="http://1_баннер.gif" id="adBanner1" border="0" width="468" height="60" alt="" /></a>

В этом коде вы указываете только данные о самом первом баннере, который указан в скрипте.

Довольно часто приходится сталкиваться с вопросом: "А как на сайте сделать плавный переход?", и ответом на этот вопрос послужит нам статья - скрипт плавного перехода наверх.
На этом всё!

Поделись ссылкой с друзьями:

Комментарии к статье

Надежда 18-08-2013

Как раз то, что я искала - с регулируемым временем и без всяких PHP!
Респект - за хороший подбор скриптов )))

Дмитрий 19-03-2014

Александр здравствуй ещё раз. Подскажи этот код ротатора банеров возможно использовать для смены банера один за другим в одном месте и формат банеров svf. Помоги подскажи пожалуйста.

Admin 19-03-2014

Добрый день!
То, что в одном месте использовать Ротатор баннеров можно - это однозначно! А вот то, что FLASH форматы в баннерах, вместо стандартных GIF - это честно скажу не пробовал.
И скорее всего Вы имели ввиду формат SWF, а не SVF (я просто такого не слышал).

Дмитрий 19-03-2014

Да опечатался swf формат конечно.
Спасибо за ответ буду пробовать менять на GIF.