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

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

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

Answer 2

使用jquery你可以做这样的事情

See jsfiddle here

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

网页的随机背景图片

2 个答案: