Случайный HTML картинка на JavaScript случайное фото из директории


В предыдущем примере, мы писали простой скрипт случайного вывода текста или html или картинки для PHP.
Но, как известно не всегда можно использовать PHP (например, на некоторых бесплатных хостинг сайтах PHP отключен).
Здесь на помощь приходит Java Script , который, к слову, ещё и экономит вычислительные ресурсы Вашего сайта, так как выполняется на компьютере клиента (то есть посетителя).

Рассмотрим аналог случайной генерации текста на языке JavaScript.

Составим список (массив) в котором перечислим имеющиеся у нас изображения. После этого сможем случайным образом выводить их посетителям сайт (с помощью HTML тега IMG):
<script type="text/javascript">
<!--
/* объявляем переменную массив, в котором будут находится случайно генерируемые элементы (в нашем случае имена картинок)  */
var banner = new Array('photo_1.jpg','photo_2.jpg','photo_3.jpg','photo_4.jpg','photo_5.jpg');
/* считаем количество элементов в массиве с помощью оператора javascript - lenght */
var count = banner.length;
/* объявляем переменную random, в которую пропишем случайное число, от нуля до максимального номера элемента нашего массива banner (то есть: от нуля до четырех).
Для этого используется Math.random - этот метод генерирует случайное число  от 0 до 1 . Так как это число может иметь большое количество знаков после запятой, мы округляем его с помощью метода Math.floor. В итоге максимальное число не пять, а четыре, и минимальное не единица, а ноль (что отвечает порядку нумерации элементов в массивах banner[0], banner[1] и т.д.)    */
var random = Math.floor(Math.random()*count);
/* выводим случайный элемент (в нашем случае - случайную картинку из директории /img/ ) */
document.write('<img src="../img/'+banner[random]+'" alt="случайное изображение" />');
-->
</script>

Посмотреть онлайн пример работы скрипта случайно генерирующего изображение из папки.

Опубликовано 23.04.2013 в 17:00 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: Javascript · Теги: , , , , , , , , , ,