Пишем простой Ротатор баннеров на 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» нужно написать свое количество баннеров.
На этом все. Можете смело использовать данный ротатор баннеров для экономии места на своем сайте или блоге.
diktar
04.11.2019 - 19:37
Приветствую!
А можно что нибудь придумать вот для такого необычного эффекта: http://vakant.info/chat.html#txt — бегущие аватарки слева и справа чата на странице — с возможностью добавления