javascript - 网页的随机背景图片

Question

我正在尝试找到一种方法，使图像能够占据整个浏览器窗口并且具有响应性。每次加载页面时，我都希望背景图像从我在本地拥有的一组精选照片中更改。

我在这里尝试了一些解决方案，但没有任何效果。我的 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]);

Answer 1

您需要像这样在 JavaScript 中存储图像数组:

var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];

之后，您将需要某种随机数，该随机数符合您在上述数组中拥有的图像 src 的数量。

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

您将在此处使用 Math.random()

然后您需要创建一个函数，该函数将在加载文档时执行，该函数会更改上述背景的 src。

您的最终函数可能如下所示:

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]);
});