09.10.2015 iMarketing5

Пишем простой Ротатор баннеров на JavaScript

В данном посте я хочу представить вашему вниманию простой ротатор баннеров на JavaScript.

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

Для установки ротатора достаточно добавить в нужное место страницы, например в сайдбар, следующий код:

<script>
var banner = new Array();
banner[0] = ‘<a href=»Страница-1″ target=»_blank»><img src=»Изображение-1″ alt=»Название-1″ width=»250″ height=»400″></a>’;
banner[1] = ‘<a href=»Страница-2″ target=»_blank»><img src=»Изображение-2″ alt=»Название-2″ width=»250″ height=»400″></a>’;
banner[2] = ‘<a href=»Страница-3″ target=»_blank»><img src=»Изображение-3″ alt=»Название-3″ width=»250″ height=»400″></a>’;
var n = ~~(Math.random()*3);
document.write(banner[n]);
</script>

Приведу необходимые пояснения.
href=»Страница-1″ — ссылка на направляемую страницу, например:
href=»http://online-dohod.ru/»
target=»_blank» —  открывать страницу в новом окне.
src=»Изображение-1″ — путь до изображения баннера, например:
src=»http://online-dohod.ru /banners/bann1.jpg»
alt=»Название-1″ — название баннера.
width=»250″ height=»400″ — ширина и высота изображения в пикселях.
Если вам необходимо добавить в ротатор больше баннеров, увеличьте количество строк banner[n], до нужного количества, добавив banner[3], banner[4] и так далее. При этом в строке var n=~~(Math.random()*3); за место числа «3» нужно написать свое количество баннеров.
На этом все. Можете смело использовать данный ротатор баннеров  для экономии места на своем сайте или блоге.

Понравилась статья? Поделись с друзьями в:

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Яндекс
#addurl#баннер#сайт#ссылки#трафик#яндекс

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *