Immagine di sfondo casuale all'aggiornamento

Sto tentando di caricare un'immagine in modo casuale ogni volta che un utente visita il sito. Ho seguito un paio di thread precedenti sul problema e non riesco a farlo funzionare.Immagine di sfondo casuale all'aggiornamento

Attualmente sto seguendo questo tutorial: http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

Ma sono ancora problemi. 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" > 

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 poi entrato nella div nel corpo della pagina, ma senza alcun risultato:

<body> 

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

</div> 
</body>

Dove sto andando male?

Grazie.

fonte

2013-10-14 Hohohobo

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

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

Il contenuto di un tag script con un attributo src deve 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 Scripting HTML5 dice:

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

E lo stesso vale per le versioni precedenti credo.

Edit:

Se si sta lavorando su file system locale, assicurarsi di modificare l'URL per jQuery per http: // invece di //.

Inoltre, assicurarsi che lo script venga eseguito quando l'elemento #background esiste chiamando su document ready.

Questo esempio dovrebbe funzionare anche a livello locale:

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

fonte

2013-10-14 21:24:09 becquerel

Grazie, ho modificato questi errori insieme agli errori indicati da isherwood e jacouh ma le immagini non si stanno ancora caricando. – Hohohobo

Ho creato un violino che funziona: http://jsfiddle.net/ffXUC/ - anche se è difficile dire perché il tuo non lo è. Hai controllato la console del browser/gli strumenti di sviluppo web (F12 in Chrome) per eventuali errori? – becquerel

Grazie - e no non l'ho fatto. L'errore che ottengo è: Uncaught ReferenceError: $ non è definito index.html: 11 (funzione anonima). Linea 11: $ ('#background'). Css ({'background-image': 'url (images /' + images [Math.floor (Math.random() * images.length)] ')'}); – Hohohobo

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

dovrebbe essere

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

(O era solo un errore di battitura?)

fonte

2013-10-14 21:15:37 isherwood

dovrebbe essere ''

–

Grazie. Fisso. Occhi stanchi.:-D – isherwood

Per mostrare background-image, un div deve avere una certa dimensione/zona, hanno-si è provato questo?

<body> 

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

</div> 
</body>

fonte

2013-10-14 21:20:59 jacouh

Avevo già dato le proprietà di larghezza e altezza dello sfondo al 100% in modo che l'immagine riempisse lo schermo: #background { \t position: fixed; \t sinistra: 0px; \t superiore: 0px; \t dimensioni sfondo: 100%; \t larghezza: 100%; \t altezza: 100%; \t -webkit-user-select: none; -khtml-utente-seleziona: nessuno; -moz-user-select: none; -o-seleziona-utente: nessuno; selezione utente: nessuna; \t z-index: 9990; } – Hohohobo

Immagine di sfondo casuale all'aggiornamento

risposta

Problemi correlati