Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2012 » Декабрь » 20 » Баннерная система посредствами JavaScript
09:21
Баннерная система посредствами JavaScript
Здравствуйте уважаемые читатели!
Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. Данная функция, кстати, может быть полезна и программистам на ASP.

Для чего это нужно?
Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.
Несмотря на то, что я буду объяснять как написать небольшую баннерную систему с использованием JavaScript, изложенные принципы вполне применимы и для любых других языков.
Условия задачи и ограничения
А теперь, давайте, более подробно сформулируем условия задачи и введем ряд ограничений, которые упростят программирование. Баннерная система должна выполнять следующие функции: 
  1. где-то хранить базу данных о баннерах
  2. случайно выбирать, из вышеупомянутой базы, несколько неповторяющихся баннеров
  3. обеспечивать механизмы отображения баннеров и перехода на нужную страничку при нажатии
Накладываем на эти условия некоторые ограничения: 
  1. баннеры будут фиксированного размера, и храниться в формате GIF или JPEG
  2. на страничке мы будем одновременно показывать четыре баннера
Ну вот, условия и ограничения определены. Теперь, давайте, более подробно рассмотрим, каким образом лучше всего хранить баннеры. В качестве базы для хранения параметров баннеров мы воспользуемся обычным массивом. О каждом из баннеров нам будет необходимо хранить следующую информацию: 
  1. имя файла
  2. альтернативный текст
  3. адрес странички, на которую ссылается баннер
Для удобства хранения и обновления базы баннеров, лучше всего выделить ее описание в отдельный файл и подключить при помощи механизма вставки внешнего js-файла. Это делается в секции заголовка при помощи следующей конструкции:
Code
<script language="JavaScript" src="banners.js"></script>
А вот так, будет выглядеть содержимое файла banners.js
Code
var banners = new Array(

  "pic-01.gif", "Text #1", "http://www.link1.com/",
  "pic-02.gif", "Text #2", "http://www.link2.com/",
  "pic-03.gif", "Text #3", "http://www.link3.com/",
  "pic-04.gif", "Text #4", "http://www.link4.com/",
  "pic-05.gif", "Text #5", "http://www.link5.com/",
  "pic-06.gif", "Text #6", "http://www.link6.com/",
  "pic-07.gif", "Text #7", "http://www.link7.com/",
  "pic-08.gif", "Text #8", "http://www.link8.com/",
  "pic-09.gif", "Text #9", "http://www.link9.com/",
  "pic-10.gif", "Text #10", "http://www.link10.com/"
Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.
Программная часть
Вот мы и добрались до программирования. И, сначала, разберемся с некоторыми моментами.
Начнем с генерации неповторяющихся баннеров. Для выбора произвольного баннера, нам необходимо сгенерировать случайное число в диапазоне от нуля до числа баннеров минус один. Это несложно и делается следующим фрагментом кода:
Code
n = Math.floor(Math.random()*(banners.length/3));
Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач, мы организуем еще один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведен ниже:
Code
var i, j;
var flag; // Флажок, используемый для проверки совпадения
var banners_show = 4; // Число показываемых на страничке баннеров

var rand = new Array(banners_show-1);

for (i=0; i<banners_show; i++) {
  do {
  flag=0;
  n = Math.floor(Math.random()*(banners.length/3));
  for (j=0; j<i; j++) {
  if (n == rand[j]) {
  flag=1;
  }
  }
  } while (flag);
  rand[i] = n;
Ввиду того, что баннеры будут генерироваться на лету, в процессе загрузки страницы, вышеприведенный фрагмент кода необходимо разместить вне функции. В момент, когда броузер перейдет к отрисовке странички, мы уже будем иметь готовый массив случайных чисел.
Для отрисовки баннеров, мы напишем простую функцию, и будем передавать ей в качестве параметра порядковый номер баннера на страничке. Используя этот номер, мы читаем из массива rand[] случайное число для конкретного баннера и уже используя его, находим все необходимые для отрисовки данные:
Code
function Show_Banner(number) {

n=rand[number-1];

document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' +
banners[n*3] + '"' + 'border=0 width=' + banner_width + ' height=' +
banner_height + ' alt="' + banners[n*3+1] + '"></a>');

Вот, практически и все, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно, только не забыть, что код JavaScript отделяется от html тегами <script></script>:
Code
<script>
<!--
Show_Banner(1);
//-->
</script>

.......

<script>
<!--
Show_Banner(4);
//-->
</script> 
Для проверки работоспособности локальной баннерной системы, несколько раз нажмите в броузере кнопку Reload и убедитесь, что каждый раз генерируются разные и не совпадающие друг с другом баннеры.
Ну вот мы и разобрались сегодня,как нам устроить нашу баннерную систему на своем сайте.
Удачи Вам в раскрутке своего сайта!
Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.
Категория: Javasсript | Просмотров: 1250 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика