如何使用 jquery 在页面加载和每次刷新时随机更改内联图像？答案

【问题标题】：How to randomly change inline images on page load and each refresh, using jquery?如何使用 jquery 在页面加载和每次刷新时随机更改内联图像？
【发布时间】：2010-04-25 00:18:11
【问题描述】：

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

喜欢这个http://javascript.internet.com/miscellaneous/random-image.html的jQuery版本

更新：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>

【问题讨论】：

标签： javascript jquery css xhtml

【解决方案1】：

我在这里找到了解决方案

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

【讨论】：

该页面的作者张贴说他在 7 月份修复了一个 IE 错误，如果你没有注意到的话。

【解决方案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="" />');
    });

});

【讨论】：

@metal-gear-solid 您在谈论随机选择中每个图像的路径吗？
我正在制作一个网站，并且网站的主页有横幅图片，我想随机显示 3-4 张图片。每当用户访问网站时，他都会看到图像发生了变化。
我需要这个javascript.internet.com/miscellaneous/random-image.html的不显眼的jquery版本
我想让这件事对客户来说很容易。客户不能添加源，但他可以添加。具有任何特定名称顺序的特定文件夹中的图像。就像我可以指示他添加这样的图像banner-1.jpg，banner2.jpg .....

【解决方案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 循环遍历图像文件夹的内容，并“回显”使用所有图像路径的字符串填充数组的行。

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

【讨论】：

@PortableWorld - 在@alex 的回答下查看我的 cmets。