Поводом к написанию этого поста послужила просьба моего друга. В этом статье я хочу рассказать как при помощи JavaScript можно реализовать для страницы(или для какого-либо конкретного элемента на странице) случайное фоновое изображение. Суть в том, что при каждом обновлении странице, фоновая картинка менялась случайным образом.
Для того чтобы при каждом обновлении подгружалась случайная фоновая картинка необходимы сами фоновые картинки. Все картинки переименовываем в соответствии с шаблоном: «<число>.jpg». К примеру: 1.jpg, 2.jpg, 3.jpg и т.д…
Получаем случайное число
Далее пишем функцию, которая выдает случайное целое число в диапазоне от имени первой картинки до последней.
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Функция getRandomInt(min,max) получает два параметра: min и max — минимальное случайное число и максимальное случайное число.
Функция случайного бэкграунда
Для своих бэкграундов я создал рядом со страницей каталог img, в который и положил картинки для фона.
function changeBG() {
var first = 1; // Первая картинка
var last = 7; // Последняя картинка
var path = 'img/'; // Путь к каталогу с картинками
var img_src = 'url("' + path + getRandomInt(first,last) + '.jpg")';
var div = document.getElementById("main");
div.style.backgroundImage=img_src;
}
В функции объявляются 3 переменные:
first— номер первой картинки.last— номер последней картинки.path— путь к каталогу с бэкгнраундами.
Вызываем функцию changeBG
В JavaScript преопределено событие загрузки страницы onload, которое происходит когда страница полностью загружена. После того как страница загрузилась, вызываем нашу функцию changeBG для случайного бэкграунда:
window.onload = changeBG;
После всего этого при обновлении страницы будет подгружаться случайное фоновое изображение. Далее привожу полный код страницы со скриптом.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Random Background Image - web4develop.ru</title>
<script type="text/javascript">
window.onload = changeBG;
function changeBG() {
var first = 1; // Первая картинка
var last = 7; // Последняя картинка
var path = 'img/'; // Путь к каталогу с картинками
var img_src = 'url("' + path + getRandomInt(first,last) + '.jpg")';
var div = document.getElementById("main");
div.style.backgroundImage=img_src;
}
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body id="main">
<span>Reload page to see a new random background image =)</span>
</body>
</html>