Question

每次用户访问网站时，我都会尝试随机加载图片。我已经按照一个教程和几个先前的线程来解决这个问题，似乎无法让它发挥作用。图像位于/ 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>

然后我进入了页面正文中的div，但无济于事：

<body>

<div ="#background"></div>
<div class="container">

</div>
</body>

我哪里错了？

Answer 1

定义数组时，数组值之间必须有逗号分隔符。

您还应该有两个单独的脚本元素，一个用于包含jquery，另一个用于代码。

大多数浏览器都应忽略带有src属性的脚本标记的内容。

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

W3C 4.3 Scripting HTML5说：

如果存在src属性，则该元素必须为空或仅包含也与脚本内容匹配的脚本文档限制。

对于我认为的早期版本也是如此。

修改

如果您正在使用本地文件系统，请务必将jQuery的URL更改为 http：// ，而不仅仅是 // 。

此外，通过在document ready上调用，确保在#background元素存在时执行脚本。

此示例甚至可以在本地使用：

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

Answer 2

<div ="#background"></div>

应该是

<div id="background"></div>

（或者那只是一个错字？）

Answer 3

要显示背景图片，div必须有一些尺寸/面积，你试过吗？

<body>

<div id="background" style="width: 50px; height: 60px;"></div>
<div class="container">

</div>
</body>

随机背景图像上刷新

3 个答案: