web-dev-qa-db-fra.com

Image de fond aléatoire lors de l'actualisation

J'essaie de charger une image de manière aléatoire chaque fois qu'un utilisateur visite le site. J'ai suivi un tutoriel et quelques discussions précédentes sur la question et je ne peux pas sembler le faire fonctionner. Les images sont dans le dossier/images/et les noms de fichiers sont correctement entrés dans le tableau: 

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

J'ai ensuite entré le div dans le corps de la page, mais en vain:

<body>

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

</div>
</body>

Où vais-je mal?

Je vous remercie.

jqueryimageweb
12
Automatic Yes

Vous devez avoir des séparateurs de virgule entre les valeurs du tableau lorsque vous définissez votre tableau.

Vous devez également avoir deux éléments de script distincts, l’un pour inclure jquery et l’autre pour votre code.

Le contenu d'une balise de script avec un attribut src devrait être ignoré par la plupart des navigateurs.

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

S'il existe un attribut src, l'élément doit être vide ou contient uniquement la documentation de script qui correspond également au contenu du script restrictions.

Et la même chose est vraie pour les versions précédentes, je crois.

Modifier:

Si vous travaillez sur le système de fichiers local, veillez à modifier l'URL jQuery en http: // au lieu de //.

Assurez-vous également que votre script est exécuté lorsque l'élément #background existe en appelant/ document ready .

Cet exemple devrait fonctionner même localement:

<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>
21
becquerel
<div ="#background"></div>

devrait être

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

(Ou était-ce juste une faute de frappe?)

3
isherwood

Pour afficher l’image d’arrière-plan, une div doit avoir une taille/zone, l’avez-vous essayé?

<body>

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

</div>
</body>

?

0
jacouh