webentwicklung-frage-antwort-db.com.de

Zufälliges Hintergrundbild beim Aktualisieren

Ich versuche jedes Mal, wenn ein Benutzer die Site besucht, ein Bild zufällig zu laden. Ich habe ein Tutorial und ein paar vorangegangene Threads zu diesem Thema verfolgt und scheint nicht zu funktionieren. Die Bilder befinden sich im Ordner/images/und die Dateinamen werden korrekt in das Array eingegeben: 

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

Ich habe dann das div in den Körper der Seite eingegeben, aber ohne Erfolg:

<body>

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

</div>
</body>

Wohin gehe ich falsch?

Vielen Dank.

12
Automatic Yes

Bei der Definition Ihres Arrays müssen zwischen den Arraywerten Trennzeichen vorhanden sein.

Sie sollten auch zwei separate Skriptelemente haben, eines für die Aufnahme von Jquery und das andere für Ihren Code.

Der Inhalt eines Skript-Tags mit einem src-Attribut sollte von den meisten Browsern ignoriert werden.

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

Wenn ein src-Attribut vorhanden ist, muss das Element entweder leer oder .__ sein. enthalten nur Skriptdokumentation, die auch mit dem Skriptinhalt übereinstimmt Beschränkungen.

Und das Gleiche gilt für frühere Versionen, glaube ich.

Bearbeiten:

Wenn Sie mit dem lokalen Dateisystem arbeiten, stellen Sie sicher, dass Sie die URL in jQuery in http: // und nicht nur in // ändern.

Stellen Sie außerdem sicher, dass Ihr Skript ausgeführt wird, wenn das Element #background vorhanden ist, indem Sie document ready aufrufen.

Dieses Beispiel sollte auch lokal funktionieren:

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

sollte sein

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

(Oder war das nur ein Tippfehler?)

3
isherwood

Um ein Hintergrundbild anzuzeigen, muss ein Div eine Größe/Fläche haben.

<body>

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

</div>
</body>

?

0
jacouh