JS - простейший ротатор баннеров с подключением на сторонний сайт

JS - простейший ротатор баннеров с подключением на сторонний сайт


Аналог на php
php вариант для больших кодов

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

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


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

1. Создаем javascript файл

Для начала создадим пустой *.js файл с любым именем, например, стандартное script.js и загрузим себе на хост. Я "центром" выбрал данный сайт, где хранятся не только код вращалки, но и все необходимые картинки для него.

Допустим мы получили прямой адрес нашего скрипта, например:



Значит код для вставки на сторонние ресурсы будет таким:
<script src="http://artemmian.ru/uploads/banners/script.js"></script>


2. Код ротатора

var banners = [
'<a href="http://artemmian.ru/9-luchshaya-pop-up-i-click-under-partnerka.html"target="_blank"><img src="http://artemmian.ru/uploads/banners/popunder.png"></a>',
"<a href='http://artemmian.ru/226-websurf-avtoserf-navechno.html' target='_blank'><img src='http://artemmian.ru/uploads/banners/websurf.png'></a>"
];

Запись выше, если ее попытаться визуализировать представляет из себя вот такую табличку, только в данном случае заполненными будут 0 и 1 т.к. строк в коде всего две

JS - простейший ротатор баннеров с подключением на сторонний сайт

Мы создаем переменную banners, в которой объявляем массив и сразу же заполняем его строками (баннерами). На этом и построена работа ротатора, мы будем генерировать случайное число и выводить код, соответствующий этому номеру.

Правило записи кавычек и разделение строк

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

var banners = ['baner', "baner", 'baner'];

var banners = [
'baner',
"baner",
'baner',
'"так делать можно"',
"'и так тоже'",
""а так нельзя"",
'переносить строку(баннер)
на новую строку тоже нельзя'
];


Теперь мы генерируем случайное число от нуля, до суммы баннеров:
var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);


и выводим на страницу, в том месте, где расположен вышеуказанный код баннера:
document.write(banners[rand]);


Итоговый код буде таким:

var banners = [
'Ваш код баннера',
"Ваш код баннера"
];

var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
document.write(banners[rand]);


3. Расширение функционала

Любому разработчику на javascript известно, что для ускорения загрузки сайта необходимо вызов скрипта опускать в конец кода перед закрывающим тегом BODY. Но мне, честно говоря, лень этим заниматься.

Короче говоря, если вы хотите опустить вызов скрипты в конец кода страницы, то делаем следующее:

1. опускаем скрипт вниз, а в том месте, где собираетесь выводить баннеры вставляете пустой DIV с любым классом, например:
<div class="code_block"></div>  

удаляете строку document.write(); из вашего скрипта и:

- на обычном javascript
дописываете небольшой кусочек и получаете итоговый скрипт. если необходимо сменить класс, то нажмите ctrl+F в редакторе и найдите его самостоятельно, это не трудно, он сразу после генерации числа :)
var banners = [
'Ваш код баннера',
"Ваш код баннера"
];

var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);

insert = document.querySelector('.code_block');
insert.insertAdjacentHTML(afterbegin, banners[rand]);


- на jQuery с теми же условиями код такой:
var banners = [
'Ваш код баннера',
"Ваш код баннера"
];

var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
$('.code_block').append(banners[rand]);


Скачать js-ban-rand.zip Размер: 598 b Скачиваний: 211
Понравилась статья "JS - простейший ротатор баннеров с подключением на сторонний сайт" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 1242   Дата: 09-окт-2016, 17:18

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика