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

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

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

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


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

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

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

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

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

https://devarts.pro/uploads/banners/script.js

Значит код для вставки на сторонние ресурсы будет таким:

<script src="https://devarts.pro/uploads/banners/script.js"></script>

Код ротатора

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

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

js rotator bannerov - 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]);

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

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

Для этого размещаем код в нужном месте, а в том месте, где собираетесь выводить баннеры, вставляете пустой 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]);

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

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

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