Смена изображений при перезагрузке web-страницы

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Демо-пример

Исходники (361 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Установка на сайт

1. Скачайте учебный материал, распакуйте в текущую папку на компьютере. В папке randomimage находятся:
- папка с изображениями img;
- папка js со скриптом random.js;
- файл index.html.

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

2. Подберите несколько изображений с одинаковыми размерами, или пока используйте мои, затем смените на свои, и загрузите их в папку img вашего сайта.

3. Файл скрипта random.js загрузите в корневую папку со скриптами на сайт, обычно она называется js.

4. На странице своего сайта в разделе head вставьте следующий код вызова скрипта:

<script type="text/javascript" src="js/random.js"></script>

Путь к файлу random.js.

5. В разделе body вставьте этот код:

<script type="text/javascript">
<!---
RandomImageLong("img/sk1.jpg img/sk2.jpg img/sk3.jpg img/sk4.jpg img/sk5.jpg","width=600 height=450");
// --->
</script>

Путь к первой картинке. Их может быть столько, сколько нужно Вам.

Ширина и высота картинок.

Капля полезной информации

Чтобы не размещать громоздкие коды скриптов на странице сайта, можно сделать следующее:

Создать новый текстовой документ (xxxx.js) и дать ему любое название по вашему усмотрению, например random.js;
Скопировать код скрипта, исключая строки <script type="text/javascript" language="javascript"> в самом начале и </script> в самом конце и вставить в созданный документ;
Файл random.js закачать в папку со скриптами на сервер сайта;
В разделе head вставить такой код вызова скрипта:
<script type="text/javascript" src="js/random.js"></script>, указав правильный путь к файлу самого скрипта, например, js/random.js;

Вот и всё о чём хотел рассказать. Применяйте на своём сайте! Пока! Л.М.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки