刷新時的隨機背景圖像

我試圖在用戶每次訪問該網站時隨機加載圖像。我已經跟蹤了幾個關於這個問題的線索，似乎無法讓它工作。刷新時的隨機背景圖像

我正在下面這個教程：http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

但我仍然有問題。圖像位於/ images /文件夾中，文件名正確輸入到數組中。

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

我隨後進入的頁面的div，但無濟於事：

<body> 

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

</div> 
</body>

我要去哪裏錯了？

謝謝。

來源

2013-10-14 Hohohobo

定義數組時，您必須在數組值之間使用逗號分隔符。

你還應該有兩個獨立的腳本元素，一個用於包含jquery，另一個用於代碼。

大多數瀏覽器都應該忽略具有src屬性的腳本標記的內容。

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

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

而且同樣適用於早期版本的，我相信如此。

編輯：

如果您的本地文件系統上工作時，請務必將網址更改爲jQuery來HTTP：//，而不是僅僅//。

此外，請確保在#background元素存在時通過調用document ready來執行腳本。

這個例子甚至應該在本地工作：

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

來源

2013-10-14 21:24:09 becquerel

謝謝，我已經修正了這些錯誤以及isherwood和jacouh指出的錯誤，但圖像仍未加載。 – Hohohobo

我創建了一個可以工作的小提琴：http://jsfiddle.net/ffXUC/ - 雖然很難說你爲什麼不是。您是否檢查過瀏覽器控制檯/網絡開發人員工具（Chrome中的F12）是否有任何錯誤？ – becquerel

謝謝 - 不，我沒有。我得到的錯誤是：Uncaught ReferenceError：$未定義index.html：11 （匿名函數）。第11行是：$（'#background'）。css（{'background-image'：'url（images /'+ images [Math.floor（Math.random（）* images.length）] +'）'} ）; – Hohohobo

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

應該

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

（或者是隻是一個錯字？）

來源

2013-10-14 21:15:37 isherwood

應該是''

感謝 –

。固定。累了的眼睛。：-D – isherwood

要顯示背景圖片，一個div必須具有一定的規模/地區，有 - 你試過嗎？

<body> 

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

</div> 
</body>

？

來源

2013-10-14 21:20:59 jacouh

我已經給出了100％的背景div寬度和高度屬性，所以圖像將填滿屏幕：#background { \t position：fixed; \t left：0px; \t top：0px; \t background-size：100％; \t寬度：100％; \t身高：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

刷新時的隨機背景圖像

回答

相關問題