我试图找到一种方法,我可以拥有占据整个浏览器窗口并响应的图像。每次加载页面时,我都希望背景图像从我本地选择的一组照片中更改。
我在这里尝试了一些解决方案,但没有什么是真的有效。我的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]);
答案 0 :(得分:3)
您需要使用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]);
});
答案 1 :(得分:1)
使用jquery你可以做这样的事情
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;