如何在页面加载和每次刷新时使用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/