我想要的很简单，每次刷新页面时都显示一个新图像，现在可以正常工作，我的问题是选择这些图像，它们有数百个，包括 .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>
最佳答案
假设您有 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
控制台 View :
$> 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>关于javascript - 如何使用 javascript 以随机顺序显示文件夹中的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56947549/