刷新的随机背景图像 [英] Random background image on refresh
问题描述
每次用户访问网站时，我都会尝试随机加载图片。我在这个问题上遵循了一个教程和几个先前的线程，似乎无法使其正常工作。图像位于/ images /文件夹中，文件名正确输入到数组中：
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:
<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>
我已经在页面正文中输入了div，但无济于事：
I've then entered the div in the body of the page, but to no avail:
<body>
<div ="#background"></div>
<div class="container">
</div>
</body>
我哪里出错？
谢谢。
推荐答案
定义数组时，数组值之间必须有逗号分隔符。
You must have comma separators between the array values when you define your array.
您还应该有两个单独的脚本元素，一个用于包含jquery，另一个用于代码。
You should also have two separate script elements, one for including jquery and the other for your code.
脚本标记的内容大多数浏览器都应该忽略src属性。
The content of a script tag with a src-attribute should be ignored by most browsers.
<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>
如果有src属性，则该元素必须为空或
仅包含与脚本内容
限制匹配的脚本文档。
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
以前也是如此我相信版本。
And the same is true for earlier versions I believe.
修改：
如果你在当地工作文件系统，请务必将网址更改为jQuery的为 HTTP：// ，而不是仅仅的 //
If you are working on the local file system , make sure to change the URL to jQuery to http:// instead of just //.
此外，通过在准备好文档上调用，确保在#background元素存在时执行脚本。
Also, make sure your script is executed when the #background element exists by calling in on document ready.
此示例甚至可以在本地使用：
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>
这篇关于刷新的随机背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
