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

HTML
31.10.2016

Суть задачи:

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

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

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

Рекомендую к прочтению:

Комментарии (6) к “Делаем на сайте случайные картинки для фона и для некоторых элементов”

Оставить комментарий