jQuery 刷新时的随机背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19369426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Random background image on refresh
提问by Automatic Yes
I'm attempting to to randomly load an image each time a user visits the site. I've followed a tutorial and a couple of previous threads on the issue and can't seem to get it working. The images are in the /images/ folder and the filenames are correctly entered into the array:
每次用户访问该站点时，我都试图随机加载一个图像。我遵循了一个教程和几个关于这个问题的先前线程，但似乎无法让它工作。图像位于 /images/ 文件夹中，并且文件名已正确输入到数组中：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script type="text/javascript">
var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg'];
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>
I've then entered the div in the body of the page, but to no avail:
然后我在页面正文中输入了 div，但无济于事：
<body>
<div ="#background"></div>
<div class="container">
</div>
</body>
Where am I going wrong?
我哪里错了？
回答by becquerel
You must have comma separators between the array values when you define your array.
定义数组时，数组值之间必须有逗号分隔符。
You should also have two separate script elements, one for including jquery and the other for your code.
您还应该有两个单独的脚本元素，一个用于包含 jquery，另一个用于您的代码。
The content of a script tag with a src-attribute should be ignored by most browsers.
大多数浏览器应该忽略带有 src-attribute 的脚本标签的内容。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
如果有 src 属性，则该元素必须为空或仅包含也符合脚本内容限制的脚本文档。
And the same is true for earlier versions I believe.
我相信早期版本也是如此。
Edit:
编辑：
If you are working on the local file system , make sure to change the URL to jQuery to http://instead of just //.
如果您在本地文件系统上工作，请确保将 jQuery 的 URL 更改为http://而不仅仅是//。
Also, make sure your script is executed when the #background element exists by calling in on document ready.
此外，通过调用document ready来确保在 #background 元素存在时执行您的脚本。
This example should work even locally:
这个例子甚至应该在本地工作：
<html>
<head>
<style type="text/css">
#background {
position:fixed; left: 0px;
top: 0px; background-size:100%;
width:100%; height:100%;
-webkit-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -o-user-select: none; user-select: none;
z-index:9990;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function() {
var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
</script>
</head>
<body>
<div id="background"></div>
<div class="container">
</div>
</body>
</html>
回答by isherwood
<div ="#background"></div>
should be
应该
<div id="background"></div>
(Or was that just a typo?)
（或者这只是一个错字？）
回答by jacouh
To show background-image, a div must have some size/area, have-you tried this ?
要显示背景图像，div 必须具有一定的大小/面积，您尝试过吗？
<body>
<div id="background" style="width: 50px; height: 60px;"></div>
<div class="container">
</div>
</body>
?
?
