Главная » Javascript » Ротатор баннеров на Ваш сайт

Ротатор баннеров на Ваш сайт

Ротатор баннеров на Ваш сайт

Сегодня мало какой сайт обходится без показа баннеров. Выставляются они в основном в целях рекламы какого либо стороннего проекта или продукта ,да причин использования баннеров море. Встает вопрос как сделать динамичной смену изображений, для этого и существуют различные «Ротаторы баннеров»
Во первых, что такое баннеров: это скрипт случайного показа баннера на Вашей странице.
Сегодня расскажу об одном таком скрипте,а для наглядности как всегда можете посмотреть пример работы простейшего ротатора изображений:

Как видите все прекрасно работает.
Теперь давайте разберемся что и как устроено в работе данного скрипта,то есть посмотрим на сам код:
 

<script type="text/javascript">
var imgs1 = new Array("http://http://igrun.com/banners/ban-100-6.gif","
http://greenstree.ru/images/banner100.gif
","http://www.top4y.com/banners/ban4.gif","
http://www.vipsurfs.com/banners/ban3.gif","
http://www.a-07.ru/banners/ban4.gif","
http://www.web-ip.ru/images/100-100.gif");
 
var lnks1 = new Array("http://igrun.com/?28186","
http://greenstree.ru/?r=shurawi","
http://www.top4y.com/?ref=392","
http://www.vipsurfs.com/?ref=220","
http://www.a-07.ru/?ref=761","
http://www.web-ip.ru/index.php?refwmid=258842700634");
var alt1 = new Array("ИГРУН - логические игры разума","
Вырасти денежное дерево","
Автосерфинг без границ","Система раскрутки изаработка","
Бесконечный автосерфинг","Раскрутка и заработок");
var currentAd1 = 0;
var imgCt1 = 6;
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]
  document.getElementById('adLink1').href=lnks1[currentAd1]
  currentAd1++;
}
  window.setInterval("cycle1()",8000);
</script>
<a href=""http://igrun.com/?28186"" id="adLink1" target="_top">
<img src="http://igrun.com/banners/ban-100-6.gif" id="adBanner1"
border="0" width="100" height="100"/></a>

 
1. Первое что нужно сделать это поменять пути к файлам изображений банеров на свои
в строке скрипта : var imgs1 = new Array

2. Поменяйте на свои данные в строке: var lnks1 = new Array

3. Описание баннера прописывайте в строке скрипта: var alt1 = new Array

С размерами выводимых изображений думаю разберетесь легко.
Если все сделаете правильно должно работать на ура!

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

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

Итак смотрим:   On-line баннер ротатор

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

9 комментариев
  1. Оказывается не перевелись еще на просторах рунета умные люди! Я весь вечер потратил на установку и просмотр различных ротаторов баннеров для вордперсса. Штук 20-ть перепробовал, а результата 0. Уже спать собрался, тыркнул на последнюю ссылку и надо же, боги услышали мои ругательства, и решили не доводить меня до точки кипения! 🙂 Попробовал Ваш код — то что надо! Только есть пара вопросов от чайника: 1) куда и как лучше загнать джава скрипт? Я прямо в релакторе в сайдбор все и вставил. Работает, но время не могу изменить. Точнее, время то меняю, но вижу, что оно по сути не меняется. Прокрутка идет с одной скоростью. Может надо не в сайдбар вставлять, а что-то еще перед этим сделать? 2) как-то парадоксально по интеллектуальному работает ваш код! Вставил 6 картинок. Все они — надписи на фоне космоса. Так вот, ваш код каким-то хитрым образом вычленяет бекграуд в виде космоса и буквы пускает с задержкой. Мне, отковенно говоря, это и нужно, но сей парадокс весьма странен. Так и задумано, или это у меня от «большого ума» получилось, и так быть не должно?

    Ответить
    • driver:

      Валерий

      1) Загнать,как вы говорите,можно куда угодно лишь бы ротатор вписывался в формы шаблона страниц вашего сайта.

      2)Парадокс он на то и парадокс что бы выглядеть странно.Скорее это происходит тогда,когда используется одно изображение для разных баннеров.Так сказать иллюзия постоянства при смене надписей.А вот если картинки вычищаются , это косяк, чей, вопрос другой.

      В задумках этого не было.

      Ответить
  2. Еще один маленкий вопрос возник: а можно ли также просто сделать, чтобы время прокрутки баннеров было разным? Т.е. каждый баннер «висел» определенно заданное время, а не все одинаково по времени прокручивались?

    Ответить
    • driver:

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

      Можно пожалуй экспериментировать, но это уже будет другой скрипт и другая история.Здесь же заделана банальная прокрутка баннеров с определенным интервалом времени,который меняется в строке:

       window.setInterval("cycle1()",8000);
      Ответить
  3. Валерий Матвеев:

    С «парадоксом» — это я перемудрил. А вот на счет всего остального: у меня почему-то не работает. Все файлы моей темы написаны на php, в том числе и сайдбар. Я просто вставил туда Ваш исходник. Одна картинка отображается (которая выводится через

    ), а дальше никаких телодвижений. Может мне надо как-то иначе все сделать? Не подскажите как именно?

    Ответить
    • driver:

      Валерий

      Cпециально протестировал у себя на демо-площадке, и в сайдбаре и в постах скрипт работает. Включал баннеры разных размеров.

      Проверьте еще раз правильно ли прописан код. Для примера поместите между <p> и </p>

      Ответить
  4. Mura:

    Салам! Сразу перейду к вопросу: как сделать комментарии снизу к определенному рисунку, чтоб когда появлялся другой рисунок, то к нему был другой коммент. Ну чтоб комменты менялись вместе с рисунками.

    Ответить
    • driver:

      Mura. Здравствуйте. Что то я не совсем въехал в суть вашего вопроса. Если вы имели ввиду описание картинки банера, то его следует прописывать в строке скрипта: var alt1 = new Array, см. пример кода скрипта. Описание это для поисковых систем, пользователи его не увидят, для заголовков банеров, необходимо добавить атрибут title="Бла-Бла-Блла" вашим банерам непосредственно в html.

      Ответить
  5. Сергей:

    Спасибо тебе добрый человек )) работает!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru