Делаем на сайте случайные картинки для фона и для некоторых элементов

Суть задачи:

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

Получается примерно такой пример:

HTML — упрощенное содержание файла index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Делаем на сайте случайные картинки для фона и для некоторых элементов</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="person" id="person"></div>
</body>
</html>

JS — содержимое файла script.js

// функция для получения рандомного числа
function randomInteger (min, max){
  var rand = min - 0.5 + Math.random() * (max - min +1)
  rand = Math.round(rand);
  return rand; 
}
// для основного фона у нас всего 6 картинок, поэтому ограничиваем случайное число от 1 до 6
var randomMainBg = randomInteger(1,6);
// для персонажа у нас всего 8 картинок, поэтому ограничиваем случайное число от 1 до 8
var randomPerson = randomInteger(1,8);
// добавляем класс для body и для #person, список возможных классов пересичлен в файле style.css
$(function(){
  $('body').addClass("bodybg-" + randomMainBg);
  $('#person').addClass("person-" + randomPerson);
});

CSS — содержимое файла style.css

*{margin:0;padding:0;}
html{height:100%;}
/* background for body */
body {background: url(img/1.jpg) 0 0/cover no-repeat;}
body.bodybg-1{background: url(../img/1.jpg) 0% 0%/cover no-repeat;}
body.bodybg-2{background: url(../img/2.jpg) 0% 0%/cover no-repeat;}
body.bodybg-3{background: url(../img/3.jpg) 0% 0%/cover no-repeat;}
body.bodybg-4{background: url(../img/4.jpg) 0% 0%/cover no-repeat;}
body.bodybg-5{background: url(../img/5.jpg) 0% 0%/cover no-repeat;}
body.bodybg-6{background: url(../img/6.jpg) 0% 0%/cover no-repeat;}
/* background for persons */
.person{height:500px;width:500px;position:absolute;bottom:0;right:0;}
.person-1{background: url(../img/1.png) right bottom/contain no-repeat;}
.person-2{background: url(../img/2.png) right bottom/contain no-repeat;}
.person-3{background: url(../img/3.png) right bottom/contain no-repeat;}
.person-4{background: url(../img/4.png) right bottom/contain no-repeat;}
.person-5{background: url(../img/5.png) right bottom/contain no-repeat;}
.person-6{background: url(../img/6.png) right bottom/contain no-repeat;}
.person-7{background: url(../img/7.png) right bottom/contain no-repeat;}
.person-8{background: url(../img/8.png) right bottom/contain no-repeat;}

IMG — так же у нас в папке img лежит 6 картинок для фона и 8 картинок для персонажа.

Пример полностью рабочий.

Скриншот:
delaem-na-sajte-sluchajnye-kartinki-dlya-fona-i-dlya-nekotoryh-elementov2

Делаем красивые чекбоксы

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

Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)

Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…

Добавить класс к элементу с помощью js

Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….

Создание офф-скрин меню с помощью CSS переходов

В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…

6 комментариев

MANUGRAND.com

Спасибо огромное за твою реализацию рандомной загрузки.
Пересмотрел кучу разных вариантов, но сразу в полной мере заработало только твое решение.

Русич

> jquery.min.js
Что это за говно?

кайфец, спасибо)

Ответить