Время чтения 4 минуты

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

Сегодня потребовалось сделать на сайте ротатор изображений 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. Дальше идем Внешний вид — Виджеты, берем виджет Текст, перетаскиваем его в правую колонку на то место, где будет находиться ротатор. Пишем заголовок, а в пустое поле вставляем вот такой код:

<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, чтобы не было слишком частого мелькания

Рабочий ротатор баннеров скрипт

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

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

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