Losowy obraz tła podczas odświeżania

Próbuję losowo załadować obraz za każdym razem, gdy użytkownik odwiedza witrynę. Podążyłem za kilkoma wcześniejszymi wątkami w tej sprawie i nie mogę sprawić, żeby działało.Losowy obraz tła podczas odświeżania

Jestem obecnie po ten poradnik: http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

Ale ciągle mam problemy. Obrazy znajdują się w folderze/images /, a nazwy plików są poprawnie wprowadzane do tablicy.

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

Mam następnie wszedł do div w treści strony, ale bezskutecznie:

<body> 

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

</div> 
</body>

Gdzie jestem będzie niewłaściwy?

Dziękuję.

Źródło

2013-10-14 Hohohobo

Musisz mieć separatory przecinkowe między wartościami tablicy, kiedy definiujesz swoją tablicę.

Powinieneś również mieć dwa oddzielne elementy skryptu, jeden do dołączania jquery, a drugi do kodu.

Zawartość znacznika skryptu z atrybutem src powinna zostać zignorowana przez większość przeglądarek.

<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 mówi:

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

I to samo odnosi się do wcześniejszych wersji wierzę.

Edit:

Jeśli pracujesz na lokalnym systemie plików, upewnij się, aby zmienić adres URL do jQuery http: // zamiast tylko //.

Upewnij się także, że skrypt jest wykonywany, gdy istnieje element #background, wywołując document ready.

Ten przykład powinien działać nawet lokalnie:

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

Źródło

2013-10-14 21:24:09 becquerel

Dziękuję, poprawiłem te błędy wraz z błędami wskazanymi przez isherwood and i jacouh, ale obrazy nadal się nie ładują. – Hohohobo

Stworzyłem skrzypce, które działa: http://jsfiddle.net/ffXUC/ - choć trudno powiedzieć, dlaczego tak nie jest. Czy sprawdziłeś, czy w przeglądarkach/programach dla webmasterów (F12 w przeglądarce Chrome) nie ma błędów? – becquerel

Dziękuję - i nie, nie miałem. Otrzymuję błąd: Uncaught ReferenceError: $ is not defined index.html: 11 (funkcja anonimowa). Linia 11 to: $ ("#background"). Css ({'background-image': 'url (images /' + images [Math.floor (Math.random() * images.length)] + ')'}); – Hohohobo

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

powinny być

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

(Albo było to tylko literówka?)

Źródło

2013-10-14 21:15:37 isherwood

powinno być '' –

Dzięki. Naprawiony. Zmęczone oczy.:-D – isherwood

Aby wyświetlić obraz tła, div musi mieć jakiś rozmiar/obszar, mają-próbowałeś tego?

<body> 

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

</div> 
</body>

Źródło

2013-10-14 21:20:59 jacouh

Już podałem właściwości szerokości i wysokości div tła w 100%, więc obraz wypełniłby ekran: #background { \t position: fixed; \t left: 0px; \t do góry: 0px; \t wielkość tła: 100%; \t szerokość: 100%; \t wysokość: 100%; \t -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; \t z-index: 9990; } – Hohohobo

Losowy obraz tła podczas odświeżania

Odpowiedz

Powiązane problemy