HTML刷新时的随机图像答案

【问题标题】：Random image on HTML refreshHTML刷新时的随机图像
【发布时间】：2018-10-05 10:02:02
【问题描述】：

我有这个网站，当你刷新它时，它会从 JS 数组中调出一个随机图像，这是代码

<html>
<head>
    <title>Refresh for image!</title>
</head>
<body>
    <script type="text/javascript">
<!--
 var imlocation = "images/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(13)
 image[0] = '1.jpg'
 image[1] = '2.jpg'
 image[2] = '3.jpg'
 image[3] = '4.jpg'
 image[4] = '5.jpg'
 image[5] = '6.jpg'
 image[6] = '7.jpg'
 image[7] = '8.jpg'
 image[8] = '9.jpg'
 image[9] = '10.jpg'
 image[10] = '11.jpg'
 image[11] = '12.jpg'
 image[12] = '13.jpg'
 image[13] = '14.jpg'
 image[14] = '15.jpg'
 image[15] = '16.jpg'
 image[16] = '17.jpg'
 image[17] = '18.jpg'
 image[18] = '19.jpg'
 var rand = 60/image.length
 function randomimage() {
    currentdate = new Date()
    image_number = currentdate.getSeconds()
    image_number = Math.floor(image_number/rand)
    return(image[image_number])
 }
 document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>
</body>
</html>

我一直在寻找不同的方法来使代码不那么笨重，更统一。我希望能够将 .png、.jpg 和 .gif 文件转储到文件夹中，而不必每次都操作代码以将新图像添加到数组中。我还发现，尽管是随机的，但每次刷新时我都会得到很多相同的图像，我认为这是基于我用来随机化图像的方法。

任何人都可以帮助我将文件转储到文件夹中并让代码完成工作而不是数组，任何人都可以帮助我随机化每个图像。

【问题讨论】：

不要标记为 NSFW。删除 anything 是 NSFW。这应该不难，而且应该很明显。
您应该设置一个可以查看图像文件夹并使用可用图像数组响应请求的端点，或者通过这样的端点提供页面，使图像在 HTML已经（例如通过application/json 脚本标签）。
客户端脚本不足以获取驻留在服务器上的整个图像列表，尽管脚本可以测试具有给定名称的图像是否存在/是否可访问。

标签： javascript html css image web

【解决方案1】：

你几乎在那里。不要在 JS 中设置图像名称，只需在将它们保存到文件夹时给它们数字名称。然后你的 javascript 可能看起来像这样：

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
}

document.write('<img src="images/' + getRandomInt(1, 20) + '.jpg">')

【讨论】：

【解决方案2】：

你好，我有一个简单的技巧

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<div id="banner-images"> </div>
<script> 
var images = ['abc.png', 'xyz.png', 'tyt.png', 'utr1.png', 'popup.png', 'psk.png'];
 
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-images');
</script>

【讨论】：