Ротатор баннеров или изображений — самый простой скрипт

Приветствую вас, уважаемые коллеги!

Сегодня потребовалось сделать на сайте ротатор изображений 3D-коробок моих курсов и книг, чтобы они постепенно сменяли друг друга, а, при нажатии на то или иное изображение, вели на определенную страницу. Хочу поделиться с Вами как это осуществить при помощи простейшего скрипта.

ротатор баннеров и изображений простой скрипт

Также такой ротатор можно использовать, если у Вас несколько партнерок, а места на сайте маловато. Да и не очень эстетично смотрится, когда весь сайт завешен рекламными баннерами. Ротатор позволяет воплотить эту идею более компактно, красиво и не так надоедливо для посетителей.

Как просто сделать ротатор изображений или баннеров?

1. Во-первых, определимся с тем, где будет располагаться наш ротатор и, в зависимости от этого, поймем, какого размера нам нужны изображения. Я, например, расположила его в сайдбаре, туда помещаются картинки не более 250px в ширину.

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

Картинка в ротаторе будет отображаться в полном размере, поэтому, если она велика для сайдбара, например, то сразу отредактируйте ее в графическом редакторе, допустим, в фотошопе. Если нет своего, воспользуйтесь аналогичным онлайн сервисом, здесь давала ссылку на него (или найдите через поиск).


3. Выявите и запишите в текстовый файл все адреса изображений, которые будут в ротаторе (у нас для примера их будет 4):

4. Дальше идем Внешний вид — Редактор и выбираем  Заголовок (header.php) !Во избежания несчастных случаев скопируйте на время весь код этого файла в текстовый файлик на Рабочий стол. Если операция пройдет успешно и пациент (то биш — сайт) будет жив, сможете удалить этот файл. А если случится непредвиденное — реанимируйте, то есть верните все на место.

В этот файл добавим вот такой код (я добавила в самый конец, чтобы не нагружать верхнюю часть лишними скриптами):

<script language="JavaScript" type="text/javascript">
 URL=new Array
  URL[0]="news.php"
  URL[1]="script.php"
  URL[2]="useful_site.php"
  URL[3]="statistics.php"

 image_ID=new Array
  image_ID[0]="image/img_1.png"
  image_ID[1]="image/img_2.png"
  image_ID[2]="image/img_3.png"
  image_ID[3]="image/img_4.png"

 var banner=3
 var last_banner=(URL.length-1)
 var pause=2000

function Rotate(image_num) {
 if (banner==last_banner) banner=0
 else banner++
 document.images[image_num].src=image_ID[banner]
 window.setTimeout('Rotate("banners")',pause);
}
</script>

5. Далее покажу на картинке что поменять в этом коде на свое:

6. Дальше идем Внешний вид — Виджеты, берем виджет Текст, перетаскиваем его в правую колонку на то место, где будет находиться ротатор. Пишем заголовок, а в пустое поле вставляем вот такой код:

<div align="center">
 <a href="javascript:document.location=(URL[banner])">
  <img name="banners" src="image/img_1.png">
 </a>
</div>

 

И, для того, чтобы наш скрипт включился, добавим туда же, в виджет еще один код:

<script language="JavaScript" type="text/javascript">
 Rotate('banners');
</script>

7. Смотрим на результат — все должно работать. Если нет — повторите все сначала, может где-то ошиблись.

Теперь в любое место достаточно поставить вот эту часть кода:

<div align="center">
 <a href="javascript:document.location=(URL[banner])">
  <img name="banners" src="image/img_1.png">
 </a>
</div>

чтобы увидеть свой ротатор (убрала, так как два одновременно не работают — в сайдбаре отключается)==>>

 

В коде есть цифры, изменяя которые можно регулировать частоту смены картинок или баннеров:

Я поставила 4000, чтобы не было слишком частого мелькания

Надеюсь, вам не трудно будет теперь установить на своем сайте ротатор баннеров или картинок. А если у вас на
сайте работает сразу несколько рекламных баннеров, объедините их таким образом в один ротатор — в результате
сэкономите место на сайте и внешне все будет смотреться благородно, да и хомячкам свобода 

 

 

Кстати, не только хомячки крутятся в колесах. В Индии такая напряженка с электричеством, что там нанимают человеческую силу, чтобы крутить колесо обозрения:

Желаю Вам такой жизни, чтобы не крутиться ни как белка, ни как хомяк, ни как эти индийцы в колесе!

С уважением, Анжелика $окова.

17 комментариев: Ротатор баннеров или изображений — самый простой скрипт

  • Андрей Чашин говорит:

    Хорошая какая штука! Спасибо, Анжелика, за подробнейшую информацию!

  • Елена говорит:

    Анжелика, очень обрадовалась, когда увидела на Вашем сайте именно то, что нужно мне в данный момент. Но, к сожалению, не поняла, как вставлять адрес, куда ведет каждая картинка. Я правильно сделала?:

     URL=new Array
      URL[0]=»http://internet-manager.ru/?vmbhash=4c32c0ed7eadef49de77ffeb26b9decbnews.php»
      URL[1]=»http://jetrevenue.Elena921.shefina.e-autopay.comscript.php»
      URL[2]=»http://effectpage.ru/p/Elena921useful_site.php»
      URL[3]=»http://vebfoto.com/e_autopay/Elena921/bookstatistics.php»

    Или нужно как-то по-другому сделать?, и на всякий случай посмотрите адрес картинок:

     image_ID=new Array
      image_ID[0]=»http://kopilkasovetov.com/wp-content/uploads/2013/07/menedgher-internet-prodagh.jpg/img_1.png»

    • admin говорит:

      Елена, добрый день! Поздно отвечаю, но Ваш комментарий попал в спам, только сегодня его оттуда выудила, спасибо, мой главный комментатор Александр Иванович подсказал..
      Надеюсь, у Вас все получилось, вроде все правильно сделали. Буду рада общению!

  • Анжелика!
    Ой спасибочки за подробное описание!
    Он мне тоже понравился.
    А я уже хотел спрашивать, как его сделать?

  • Анжелика привет!
    У меня тогда к тебе ещё одна просьба.
    Ты не подскажешь, как сделать банер который у тебя в начале каждой статьи
    Или дай ссылку, где об этом посмотреть подробно.

  • Анжелика!
    Забыл добавить в последней просьбе.
    А, как индексируют этот банер поисковики? Как картинку или иначе?

  • Max говорит:

    Хорошая статья. Но возник вопрос , хочу поставить линки на все свои страницы сайта, но как исключить из вертушки ту страницу, где в данный момент находишься, если существует такая возможность…

  • Vladimir Vladimirovich говорит:

    Спасибо огромное за статью. Как раз пытаюсь поставить что-то подобное. Хороший у Вас, Анжелика, блог. Закинул в закладки.

    • Анжелика говорит:

      Владимир Владимирович, добрый день. Благодарю за хороший отзыв))) Также хотела прокомментировать Вашу статью на блоге, но пишет постоянную ошибку, проверьте пожалуйста, очень обидно, если другим будет невозможно оставлять у Вас комментарии

  • Ксения говорит:

    Интересная информация! Я как-то об этом и не задумывалась. У меня тоже 1 сайдбар, поэтому место надо экономить.

  • Сергей говорит:

    Спасибо большое разобрался с банером, одна печалька больше поставить нельзя

  • Юлия говорит:

    Все получилось, хотя и не сразу. Но есть один вопрос: как сделать, чтоб ссылка открывалась в новой вкладке?

  • Юлия говорит:

    И еще «маленький» недостаток у скрипта: когда пытаешься открыть ссылку принудительно, через «открыть в новой вкладке», открывается окно с надписью: about:blank. Печалька!

  • Спасибо, начинаю пробовать. То что искал

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

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

Поиск по сайту:
Рекомендую:
Вконтакте
FaceBook

Все статьи сайта | Конкурсы на сайте| Пошаговое создание сайта| Рекомендую | Реклама на сайте

Copyright © 2017. Все права защищены! При копировании строго ссылка на сайт!

Создай свой сайт и заработай на нем Главная сайта.

Как заказать и купить такой готовый сайт, читайте здесь

24 Запросов за 0,141 cекунд.
Индекс цитирования