wake-up-neo.net

Immagine di sfondo casuale durante l'aggiornamento

Sto tentando di caricare in modo casuale un'immagine ogni volta che un utente visita il sito. Ho seguito un tutorial e un paio di thread precedenti sul problema e non riesco a farlo funzionare. Le immagini sono nella cartella/images/e i nomi dei file sono inseriti correttamente nell'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>

Ho quindi inserito il div nel corpo della pagina, ma senza risultato:

<body>

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

</div>
</body>

Dove sto andando male?

Grazie.

12
Automatic Yes

È necessario disporre di separatori di virgole tra i valori dell'array quando si definisce la matrice.

Dovresti anche avere due elementi di script separati, uno per includere jquery e l'altro per il tuo codice.

Il contenuto di un tag script con un attributo src dovrebbe essere ignorato dalla maggior parte dei browser.

<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 Script HTML5 dice:

Se esiste un attributo src, l'elemento deve essere vuoto o Contenere solo la documentazione di script che corrisponde anche alle restrizioni del contenuto dello script .

E lo stesso vale per le versioni precedenti, credo.

Modifica:

Se stai lavorando sul file system locale, assicurati di cambiare l'URL in jQuery in http: // invece di solo // .

Inoltre, assicurati che lo script venga eseguito quando esiste l'elemento #background chiamando su pronto per il documento .

Questo esempio dovrebbe funzionare anche localmente:

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

dovrebbe essere

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

(O era solo un errore di battitura?)

3
isherwood

Per mostrare un'immagine di sfondo, un div deve avere una certa dimensione/area, hai provato?

<body>

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

</div>
</body>

?

0
jacouh