如何在頁面加載和每次刷新時使用jquery隨機更改內嵌圖像？

Question

在每次刷新或加載頁面時，從文件夾隨機顯示嵌入圖像 的最佳輕量級方法是什麼？使用jQuery。

這樣http://javascript.internet.com/miscellaneous/random-image.html

更新的jQuery的版本：4月24日

這正是我想要的，我只是需要這個

<div class=」me-box」> 

<script language=」JavaScript」> 
function banner() { } ; b = new banner() ; n = 0 
b[n++]= 「<img name=randimg src=’images/me.jpg’ >」 
b[n++]= 「<img name=randimg src=’images/me2.jpg’ >」 
b[n++]= 「<img name=randimg src=’images/me4.jpg’ >」 
b[n++]= 「<img name=randimg src=’images/me5.jpg’ >」 
b[n++]= 「<img name=randimg src=’images/me6.jpg’ >」 
b[n++]= 「<img name=randimg src=’images/me3.jpg’ >」 
i=Math.floor(Math.random() * n) ; 
document.write(b[i]) 
</script> 

</div> 

Answer 1

的jQuery的不顯眼的jQuery版本本身無法讀取文件夾的內容。除非你用一些魔術來命名文件，例如1.jpg，2.jpg，並且在腳本中包含一個上限。

您應該使用服務器端語言來讀取文件夾並將一些JSON傳遞給您的JavaScript。然後循環JSON並顯示。

$.getJSON('get/files', function(data) { 

    $.each(data, function(image) { 
     $('#my-div ul').append('<li><img src="' + image + '" alt="" />'); 
    }); 

}); 

Answer 2

我想這將取決於你有多少圖片在說什麼，如果他們會經常改變。假設沒有多少，並且列表將保持幾乎相同。你可以通過他們的文件名進入一個數組，然後根據數組索引的長度隨機生成一個數字。

$(document).ready(function() { 
    var rndNumber; 
    var displayPictures = new Array(); 
    displayPictures[0...n] = 'filename.jpg'; 

    rndNumber = (Math.floor(Math.random()*displayPictures.length)); 

    $('#picture_tag_id_name').attr('src', 'images/'+displayPictures[rndNumber]); 

}); 

當我試圖此的網站上，我用直列PHP遍歷圖像文件夾和「迴響」的內容指出，填充與所有的圖像路徑的串陣列的行。

可能不是最好的方法，但它是一種方式。

Answer 3

我發現這裏

http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/