如何使用jQuery在页面加载和每次刷新时随机更改内联图片？

Question

什么是最好的轻量级方法，在每次刷新或加载页面时，随机显示来自文件夹的内联图像？使用jQuery。

就像这个JavaScript版本的jQuery版本：http://javascript.internet.com/miscellaneous/random-image.html 更新：4月24日

这正是我想要的，我只需要一个不显眼的jQuery版本。

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

- Jitendra Vyas

Answer 1

我在这里找到了解决方案。 http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/ 是一个与页面加载相关的jQuery插件，可以随机显示图片。

- Jitendra Vyas

---

该页面的作者在七月份发布了一篇帖子，说他修复了IE浏览器的一个bug，如果你没有注意到的话。 - lincolnk

Answer 2

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="" />');
    });

});

- alex

---

@metal-gear-solid 你是在说你的随机选择中每个图像的路径吗？ - alex

我正在制作一个网站，网站的首页有一个横幅图片，我想以随机的方式展示3-4张图片。每当用户访问网站时，他会看到图片已经更换了。 - Jitendra Vyas

我需要一个不显眼的jQuery版本，类似于这个http://javascript.internet.com/miscellaneous/random-image.html - Jitendra Vyas

我想让客户的操作变得简单。客户无法添加源代码，但可以按特定名称顺序将图像添加到特定文件夹中。例如，我可以指示他按照以下方式添加图像：banner-1.jpg、banner2.jpg...... - Jitendra Vyas

Answer 3

我猜这取决于你要谈论多少张图片以及它们是否会经常更改。假设没有很多图片，而且列表基本上不会改变。你可以将它们的文件名放入一个数组中，然后根据数组索引的长度随机生成一个数字。

$(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循环遍历图像文件夹的内容，并使用'echo'输出填充数组的行，其中包含所有图像路径的字符串。

可能不是最好的方法，但这是一种方法。

- Charles Caldwell

---

@PortableWorld - 请看我在 @alex 回答下的评论。 - Jitendra Vyas