如何使用javascript以随机顺序显示文件夹中的图像？答案

【问题标题】：How can I display images from a folder in random order with javascript?如何使用javascript以随机顺序显示文件夹中的图像？
【发布时间】：2019-11-18 17:08:28
【问题描述】：

我想要的很简单，每次刷新页面时都会显示一个新的图像，现在可以正常工作，我的问题是选择这些图像，有数百个，包括 .png 和 .jpg。按名称输入每个图像，甚至重命名它们似乎非常无用，如何更改我的代码以获取“图像”文件夹中的所有图像？

代码已发布。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✌</title>
  </head>

  <body> <!-- This piece of Javascript will randomly decide an image for your homepage. -->

    <script>
      var pictures = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png',];
      var picture = pictures[Math.floor(Math.random() * pictures.length)];
      document.write('<img src="' + picture + '"/>');
    </script>

  </body>
</html>

【问题讨论】：

你不能。客户端不知道images 文件夹中有哪些文件可用，除非您公开某种可提供此信息的 api 端点。
获取 100 张图像只是为了选择一张来使用是非常低效的。你最好把它们打出来或重命名为你可以迭代的东西。

标签： javascript html css image random

【解决方案1】：

假设您有 100 张图片。最简单的操作是用一个 id 重命名它们（比如 1.jpg 到 100.jpg），然后用它的名字随机调用一个图像。

    function getRandomInt(max) { // number between 1 & max
      return ( Math.floor(Math.random() * Math.floor(max)) )+1;
    }

    let img = document.getElementById("yourImg");
    img.src = getRandomInt(100) +".jpg";

另一个问题是图片的位置。其他计算机无法通过互联网从世界其他地方浏览您的文件夹，因此您需要将它们托管在您托管网站的位置。

但是如果网站是为了本地浏览而创建的，就不会出现问题了。

编辑：您可以验证您的文件是否存在于 js 中（使用 ajax 调用），但我认为最简单的方法是将所有 png 文件转换为 jpg（反之亦然） .有一些cool utilities可以轻松转换文件。

您可以使用mv 和索引来重命名所有*.jpg 文件。

例如.txt 文件：

script.sh

i=1
for name in *.txt; do
        mv $name $i.txt
        i=$((i+1))
done

控制台视图：

$> mkdir a
$> cd a
$> touch a.txt
$> touch b.txt
$> touch zerg.txt
$> touch heyy.txt
$> ls
a.txt  b.txt  heyy.txt  script.sh  zrg.txt
$> nano script.sh
$> chmod +x script.sh
$> ./script.sh
$> ls
1.txt  2.txt  3.txt  4.txt  script.sh

编辑2：

您必须使用子目录、随机名称和扩展名创建 url 路径。

这里有一些代码可以帮助您入门：)

<img id="test" />
<p id="text"></p>

<script>
    // config, modify your values here :)
    let directory = "img/";
	let nb_of_files = 100;

	function getRandomInt(max) { // number between 1 & max
		return ( Math.floor(Math.random() * Math.floor(max)) )+1;
	}

	let random_int = getRandomInt(100);
	let img = document.getElementById('test');
	img.src = directory + random_int +".jpg";

	document.getElementById('text').innerHTML = "Image choosen is "+ img.src +"";
</script>

【讨论】：

嘿，Sod，我试试这个，我确实有一些问题： 1. 要同时添加 .jpg 和 .png，我只需添加 +".png";在您的代码中的jpg之后？ 2.你不知道有一种方法可以批量重命名文件夹中的所有图像按数字顺序吗？回家后我会谷歌。该页面将严格托管在本地，所以不用担心，感谢所有帮助。
谢谢 Sod，我回家后会试一试并给你一些反馈，干杯。
好吧，我已经成功地将我的所有图像按数字顺序转换为 jpg，如果我将其更改为 1.jpg、2.jpg 等，旧代码显示正常，我只需要最后一点帮助，我该如何更改代码以便在 /images 文件夹中找到图像？我从来没有接触过javascript，所以我在这里走在黑暗中。代码贴在下面。
<body> <script> var pictures = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg',]; var picture = pictures[Math.floor(Math.random() * pictures.length)]; document.write('<img src="' + picture + '"/>'); </script> </body> 我总共有 235.jpg 图片
编辑了我的答案以添加“测试”脚本。不要忘记用您的值更新我为测试定义的 var :)

【解决方案2】：

您可以使用此处提到的 Fisher-Yates Shuffle 算法来执行此操作here：

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
var arr = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png'];
arr = shuffle(arr);
console.log(arr);

通过这种方式，您始终可以以相同的顺序打印数组键，但每次都使用不同的值。我希望这会有所帮助！

【讨论】：