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

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

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

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


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

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

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

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

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

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

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

<script src="https://devarts.pro/uploads/b/banners.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]);

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Комментарии

  1. @Иван пишет:

    какой же ЖО.Й вы все это пишите???? на всех сайтах одно и тоже, ну почему нельзя написать?, Этот код в html страницы, это код в файл .js? этот ещё куда-то, а патом уже что-то разжовывать, где какое значение, а пока это набор букв

    • @devarts пишет:

      Потому что здесь не обучение элементарным азам кодинга. Статья подразумевает, что вы хоть как-то ориентируетесь в элементарном коде и разберетесь что и куда.

      Тем более статья разжевывает очень многие вещи.

      Я бы порекомендовал вам для начала посмотреть самые начальные курсы по HTML и JS которых полно в Ютубе

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