Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
530 views
in Technique[技术] by (71.8m points)

jquery - Random background image on refresh

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...