13

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>

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>

Where am I going wrong?

4

3 回答 3

23

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

您还应该有两个单独的脚本元素，一个用于包含 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 脚本 HTML5说：

如果有 src 属性，则该元素必须为空或仅包含也符合脚本内容限制的脚本文档。

我相信早期版本也是如此。

编辑：

如果您正在处理本地文件系统，请确保将 jQuery 的 URL 更改为http://而不是//。

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

这个例子甚至应该在本地工作：

<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>
于 2013-10-14T21:24:09.023 回答
3 
<div ="#background"></div>

应该

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

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

于 2013-10-14T21:15:37.600 回答
0

要显示背景图像，div 必须有一定的大小/区域，你试过吗？

<body>

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

</div>
</body>

?

于 2013-10-14T21:20:59.790 回答