Zufälliges hintergrund-Bild auf aktualisieren

Ich bin versucht, zu zufällig ein Bild laden jedes mal, wenn ein Benutzer die Website besucht. Habe ich folgte ein tutorial und ein paar der früheren threads über das Thema und können nicht scheinen, um es funktioniert. Die Bilder sind im /images/Ordner, und die Dateinamen sind korrekt eingetragen in das 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>

Ich habe dann eingegeben das div in den body der Seite, aber ohne Erfolg:

<body>

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

</div>
</body>

Wohin gehe ich falsch?

Danke.

InformationsquelleAutor Automatic Yes | 2013-10-14

21

Müssen Sie Komma als Trennzeichen zwischen den array-Werte, wenn Sie definieren das array.

Sollten Sie auch die beiden script-Elemente, einschließlich jquery und den anderen für Ihren code.

Den Inhalt eines script-tag mit src-Attribut sollte von den meisten Browsern ignoriert.
```
<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 es ein src-Attribut, das element muss entweder leer, oder
enthalten, die nur script-Dokumentation, die auch mit Skript-Inhalt
Einschränkungen.

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

Edit:

Wenn Sie arbeiten auf dem lokalen Dateisystem , stellen Sie sicher, dass die URL, um jQuery zu http:// statt nur //.

Stellen Sie außerdem sicher, dass Ihr Skript wird ausgeführt, wenn der #hintergrund-element besteht durch die Berufung auf Dokument bereit.

Diesem Beispiel sollte funktionieren, selbst lokal:
```
<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>
```
Danke, habe ich geändert, diese Fehler zusammen mit dem Fehler hingewiesen, die von isherwood und und jacouh aber die Bilder sind immer noch nicht laden.
Ich erstellte ein Turnschuh, das funktioniert: jsfiddle.net/ffXUC - obwohl es ist schwer zu sagen, warum Ihr nicht. Haben Sie überprüft, die browser-Konsole / web-developer-tools (F12 im Chrome) für Fehler?
Danke - und Nein, ich hatte nicht. Der Fehler den ich bekomme, ist: "Uncaught ReferenceError: $ is nicht angegebenen index.html:11 (anonyme Funktion). Zeile 11: $ ('#background').css({'background-image': 'url(Bilder/' + Bilder[Math.floor(Math.random() * Bilder.length)] + ')'});
Ich bearbeitet meine Antwort - ich denke mal das $ Fehler wahrscheinlich tritt auf, weil Sie arbeiten lokal auf Ihrem computer? Dann die // in der src-url wird versuchen, Sie zu bekommen, jQuery aus dem Dateisystem. Sollten Sie auch führen Sie Ihr Skript aus, wenn das Dokument fertig ist, oder die #hintergrund-element noch nicht vorhanden. Ich bearbeitet meine obige Antwort und fügte hinzu, ein Beispiel, das funktioniert bei mir lokal.
Danke. Ich schrieb Ihre jQuery-code Buchstabe für Buchstabe und fehlte die erste Funktion() aufrufen. Das einzige Problem ist, dass jeder so oft kein Bild wird geladen, was ich davon ausgehen ist in Bezug auf die Mathematik verwendet, um zu bestimmen, die randomisierte Bild laden?

InformationsquelleAutor becquerel
3
```
<div ="#background"></div>
```
sollte
```
<div id="background"></div>
```
(Oder war das nur ein Tippfehler?)

<div id="#background"></div> sollte <div id="background"></div>
Danke. Behoben. Müde Augen. 😀

InformationsquelleAutor isherwood
0

Zeigen hintergrund-Bild, ein div-müssen eine gewisse Größe/- Bereich, haben Sie versucht das ?
```
<body>

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

</div>
</body>
```
?

Ich würde schon vor dem hintergrund div-Eigenschaften width und height von 100%, so dass das Bild füllt den Bildschirm aus: #hintergrund { 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; }

InformationsquelleAutor jacouh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.