Блог web-разработчика | HTML+CSS, PHP, MySQL, JavaScript/jQuery

Ноя/10

14

Случайное фоновое изображение с помощью JavaScript

1 коммент. » | Автор admin, рубрики JavaScript

Привет, мои читатели. Я редко пишу здесь, и вот сегодня один из таких моментов. Поводом к написанию этого поста послужила просьба моего друга. В этом посте я хочу рассказать как при помощи JavaScript можно реализовать для страницы(или для какого-либо конкретного элемента на странице) случайное фоновое изображение. Суть в том, что при каждом обновлении странице, фоновая картинка менялась случайным образом.


Пример

Для того чтобы при каждом обновлении подгружалась случайная фоновая картинка необходимы сами фоновые картинки. Все картинки переименовываем в соотвествии с шаблоном: “<число>.jpg”. К примеру: 1.jpg, 2.jpg, 3.jpg и т.д…

Получаем случайнок число

Далее пишем функцию, которая выдает случайное целое число в диапозоне от имени первой картинки до последней.

1
2
3
4

function getRandomInt(min, max)
{
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

Функция getRandomInt(min,max) получает два параметра: min и max – минимальное случайное число и максимальное случайное число.

Функция случайного бэкграунда

Для своих бэкграундов я создал рядом со страницей каталог img, в который и положил картинки для фона.

1
2
3
4
5
6
7
8
9

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 для случайного бэкграунда:

1

window.onload = changeBG;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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>

И вот ссылка на готовый пример DEMO.

PS: Миха, пользуйся =)

RSS Feed

Есть 1 комментарий. к Случайное фоновое изображение с помощью JavaScript

Alex | 1 Декабрь 2011 | 8:54

Спасибо тебе огромное :)

Написать комментарий

«

»

Найти!

Дизайн devolux
Наверх

Публикация материлов с сайта только с указанием активной ссылки на источник. web4develop.ru. 2010 год.