В этом кратеньком уроке мы создадим генератор случайных картинок!
Я уже делал уроки, на тему получения случайных чисел на PHP и на JavaScript (а также, оставанные на нем уроки о генерации цветов и цитат), но было много просьб сделать что-то подобное и для картинок.
Я решил сделать отдельный урок, где все будет наглядно, понятно и просто, начнем!
Описание генератора
Работать это будет так: перед пользователем будет кнопку, нажав на которую, будет показываться случайная картинка. Случайной она будет для пользователя, но для вас (как для разработчика) это будет картинка из заранее подготовленного списка картинок.
Чем больше у вас будет картинок, тем меньше будет повторений.
Реализация
Итак, давайте рассмотрим HTML код:
<div id="wrap">
<div id="result"></div>
<button onclick="getImg()">Получить случайную картинку</button>
</div>
В общем div блоке с идентификатором wrap располагается еще один div и кнопка. Блок с id result – это блок, в который будет выводиться случайная картинка. По нажатию на кнопку (событие onclick) будет выполняться функция getImg (о ней ниже), которая и будет получать и выводить случайную картинку.
CSS стили:
#wrap{
width: 200px;
height: 200px;
margin: 60px auto;
}
#result{
height: 200px;
}
Этими стилями я выровнял общий блок по центру, а также, благодаря заданной высоте блока с результатом, предотвратил “прыгание” кнопки во время смены картинки.
Перед тем, как разобрать код, следует кратко рассказать о логике:
У вас есть список картинок (массив ссылок на картинки), и нам нужно показать одну случайную картинку из этого списка. Обратиться к любой из картинок можно зная её индекс (порядковое число), поэтому, для получения случайной картинки нам достаточно получить число.
Какое число нужно получить?
Нужно получить число, которое не будет превышать количество картинок в списке, но так как в JavaScript индекс массива начинается с 0 (то есть отсчет будет не с 1), то и случайное число нужно получать в диапазоне от 0 до количества картинок минус 1. Например, у меня 10 картинок, поэтому будет сгенерировано случайное число от 0 до 9.
Теперь давайте рассмотрим JavaScript код:
Сначала объявляем 2 переменные:
- maxRandomNum – максимальное значение случайного числа (кол-во картинок – 1);
- randomNum – случайное число (от 0 до maxRandomNum).
Далее идет массив (список) ссылок на картинки. Добавить или удалить картинку не составит труда – просто добавьте или удалите строчку вида:
'Ссылка на картинку',
После этого идет вычисление переменной maxRandomNum и главная функция всего урока – getImg.
Функция getImg работает так:
- первая строчка – получаем случайное число;
- вторая строчка – подставляем случайное число в качестве индекса массив, и полученную таким образом ссылку используем для формирования картинки, которую вставляем в блок result.
Вот и все. Вы можете посмотреть, как это работает на реальном примере, а также скачать его к себе на компьютер.
Посмотреть результат
Скачать
На этом данный урок подошел к завершению, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.