Random background image on refresh

2020-02-05 12:59发布

站内问答 / jQuery
1718 3 6

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?

标签： jquery image web
举报
3条回答
Ridiculous、
2楼-- · 2020-02-05 13:27

To show background-image, a div must have some size/area, have-you tried this ?

<body>

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

</div>
</body>

?

查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2020-02-05 13:32 
<div ="#background"></div>

should be

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

(Or was that just a typo?)

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
4楼-- · 2020-02-05 13:37

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.

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>

W3C 4.3 Scripting HTML5 says:

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.

Edit:

If you are working on the local file system , make sure to change the URL to jQuery to http:// instead of just //.

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)