Здравствуйте уважаемый читатель.
В сегодняшней статье речь пойдёт о том, как с помощью JavaScript можно сделать для страницы (или для какого-либо конкретного элемента на странице) смену фонового изображения случайным образом при каждом обновлении странички. Для этого необходимы сами картинки фонов. Все файлы картинок необходимо переименовать по шаблону: “<число>.jpg”. Например: 1.jpg, 2.jpg, 3.jpg и т.д… Далее нужно написать функцию, которая будет выбирать целое число из диапозона имен картинок случайным образом.
Code
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Функция getRandomInt(min,max) возвращает два параметра: min и max – минимальное случайное число и максимальное случайное число.
Для наших фоновых картинок мы создадим рядом со страницей каталог img.
Code
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 – путь к каталогу с бэкгнраундами.
В JavaScript есть событие загрузки страницы onload, которое происходит после полной загрузки страницы. Этим событием и вызываем нашу функцию changeBG для случайного фона:
Code
window.onload = changeBG;
После всех этих операций при обновлении страницы будет фоновое изображение будет меняться случайным образом. Далее посмотрим как выглядит полный код нашей страницы со скриптом.
Code
<!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 - postroyweb.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>Обновите страничку и увидите другой фон =) </span>
</body>
</html>