Question

我有这个网站，当你刷新它会从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文件转储到文件夹中，而不必每次都在操作代码以在数组中添加新图像。我还发现尽管是随机的，但每次刷新都会得到相同的图像，认为这是基于我用来随机化图像的方法。

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

Answer 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">')

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

HTML刷新的随机图像

2 个答案: