Случайное фоновое изображение для веб-страницы

Я пытаюсь найти способ, которым у меня может быть изображение, которое занимает все окно браузера и реагирует. Каждый раз, когда страница загружается, мне бы хотелось, чтобы фоновое изображение изменилось на выбранную группу фотографий, которые у меня есть локально.Случайное фоновое изображение для веб-страницы

Я пробовал несколько решений здесь, но ничего действительно не работает. HTML у меня есть:

<div id="container"> 

    <img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage"> 

</div>

CSS у меня есть:

body { 
margin: 0; 
} 

#container { 
width: 100%; 
height: 100%; 
margin: 0; 
} 

#backgroundImage { 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
} 

html, body { 
overflow: none !important; 
overflow-x: none !important; 
overflow-y: none !important; 
}

Одним из решений JS, которые я попытался это:

var image = new Array(); 
image[0] = "http://placehold.it/20"; 
image[1] = "http://placehold.it/30"; 
image[2] = "http://placehold.it/40"; 
image[3] = "http://placehold.it/50"; 
var size = image.length 
var x = Math.floor(size*Math.random()) 

$('#backgroundImage').attr('src',image[x]);

источник

2016-12-15 BenRichi_

У вас есть пример кода яваскрипта вы пытались что не работает? – Bastiaanus

@Bastiaanus да простите, просто включил его –

Ваш будет необходимо иметь массив изображений, хранящихся в JavaScript, как так:

var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];

После чего вам нужно какое-то случайное число, которое соответствует количество изображений src, которое вы имеете в вышеупомянутом массиве.

http://www.w3schools.com/jsref/jsref_random.asp

Вы будете использовать Math.random() здесь

Тогда вам нужно создать функцию, которая должна выполняться при загрузке документа, который изменяет ГКЗ фона выше.

Ваша последняя функция может выглядеть следующим образом:

var picArr = ['src0', 'src1', 'src2', 'src3', 'src4', 'src5', 'src6', 'src7', 'src8', 'src9', ]; 

var myNumber = Math.floor((Math.random() * 10) + 1); 

$(document).ready(function() { 
    $("#backgroundImage").attr('src', picArr[myNumber]); 
});

источник

2016-12-15 14:52:01

Спасибо за все ответы, но этот работал сразу, просто нужно было добавить изображения! –

С JQuery вы могли бы сделать что-то вроде этого

See jsfiddle here.

var images = ['http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg', 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg', 'https://s-media-cache-ak0.pinimg.com/originals/c6/8a/51/c68a5157020c8555ca781839d754a1a0.jpg']; 
 

 
    var randomImage = Math.floor(Math.random() * 3) 
 

 
    $(document).ready(function() { 
 
     $("#container").css("background-image", "url('" + images[randomImage] + "')"); 
 
    })

html, body { 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="container"></div> 
 
</body>

источник

2016-12-15 14:51:03

Когда я пробую это, я ничего не получаю на веб-странице вообще –

Вам нужно будет использовать правильный идентификатор в '$ (" body "). Css (" background- image "," url ('"+ images [randomImage] +"') ");' so use '$ (" backgroundImage "). css (" background-image "," url ('"+ images [randomImage] + "')"); ' –

вы, вероятно, хотите использовать' $ (' # container ') ' –

Случайное фоновое изображение для веб-страницы

ответ

Смежные вопросы