Ротатор баннеров на Ваш сайт
Сегодня мало какой сайт обходится без показа баннеров. Выставляются они в основном в целях рекламы какого либо стороннего проекта или продукта ,да причин использования баннеров море. Встает вопрос как сделать динамичной смену изображений, для этого и существуют различные «Ротаторы баннеров»
Во первых, что такое ротатор баннеров: это скрипт случайного показа баннера на Вашей странице.
Сегодня расскажу об одном таком скрипте,а для наглядности как всегда можете посмотреть пример работы простейшего ротатора изображений:
Как видите все прекрасно работает.
Теперь давайте разберемся что и как устроено в работе данного скрипта,то есть посмотрим на сам код:
<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 и поделитесь ссылкой на запись в своих соц-сетях:
Оказывается не перевелись еще на просторах рунета умные люди! Я весь вечер потратил на установку и просмотр различных ротаторов баннеров для вордперсса. Штук 20-ть перепробовал, а результата 0. Уже спать собрался, тыркнул на последнюю ссылку и надо же, боги услышали мои ругательства, и решили не доводить меня до точки кипения! 🙂 Попробовал Ваш код — то что надо! Только есть пара вопросов от чайника: 1) куда и как лучше загнать джава скрипт? Я прямо в релакторе в сайдбор все и вставил. Работает, но время не могу изменить. Точнее, время то меняю, но вижу, что оно по сути не меняется. Прокрутка идет с одной скоростью. Может надо не в сайдбар вставлять, а что-то еще перед этим сделать? 2) как-то парадоксально по интеллектуальному работает ваш код! Вставил 6 картинок. Все они — надписи на фоне космоса. Так вот, ваш код каким-то хитрым образом вычленяет бекграуд в виде космоса и буквы пускает с задержкой. Мне, отковенно говоря, это и нужно, но сей парадокс весьма странен. Так и задумано, или это у меня от «большого ума» получилось, и так быть не должно?
Валерий
1) Загнать,как вы говорите,можно куда угодно лишь бы ротатор вписывался в формы шаблона страниц вашего сайта.
2)Парадокс он на то и парадокс что бы выглядеть странно.Скорее это происходит тогда,когда используется одно изображение для разных баннеров.Так сказать иллюзия постоянства при смене надписей.А вот если картинки вычищаются , это косяк, чей, вопрос другой.
В задумках этого не было.
Еще один маленкий вопрос возник: а можно ли также просто сделать, чтобы время прокрутки баннеров было разным? Т.е. каждый баннер «висел» определенно заданное время, а не все одинаково по времени прокручивались?
можно ли также просто сделать, чтобы время прокрутки баннеров было разным?
Можно пожалуй экспериментировать, но это уже будет другой скрипт и другая история.Здесь же заделана банальная прокрутка баннеров с определенным интервалом времени,который меняется в строке:
window.setInterval(“cycle1()”,8000);
window.setInterval(“cycle1()”,8000);
С «парадоксом» — это я перемудрил. А вот на счет всего остального: у меня почему-то не работает. Все файлы моей темы написаны на php, в том числе и сайдбар. Я просто вставил туда Ваш исходник. Одна картинка отображается (которая выводится через
), а дальше никаких телодвижений. Может мне надо как-то иначе все сделать? Не подскажите как именно?
Валерий
Cпециально протестировал у себя на демо-площадке, и в сайдбаре и в постах скрипт работает. Включал баннеры разных размеров.
Проверьте еще раз правильно ли прописан код. Для примера поместите между
<p> и </p>Салам! Сразу перейду к вопросу: как сделать комментарии снизу к определенному рисунку, чтоб когда появлялся другой рисунок, то к нему был другой коммент. Ну чтоб комменты менялись вместе с рисунками.
Mura. Здравствуйте. Что то я не совсем въехал в суть вашего вопроса. Если вы имели ввиду описание картинки банера, то его следует прописывать в строке скрипта: var alt1 = new Array, см. пример кода скрипта. Описание это для поисковых систем, пользователи его не увидят, для заголовков банеров, необходимо добавить атрибут title=”Бла-Бла-Блла” вашим банерам непосредственно в html.
Спасибо тебе добрый человек )) работает!