HTML 刷新时的随机图像
[英]Random image on HTML refresh
问题描述
我有这个网站，当您刷新时，它会从 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 文件转储到文件夹中，而不必每次都操作代码将新图像添加到数组中。 我还发现，尽管是随机的，但每次刷新时我都会得到很多相同的图像，认为这是基于我用来随机化图像的方法。
任何人都可以帮助将文件转储到文件夹中并让代码完成工作而不是数组的想法，任何人都可以帮助我随机化每个图像。
2 个解决方案
解决方案1
4 2018-04-25 03:44:52
你几乎在那里。 不要在 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
0 2020-10-19 12:51:45
你好，我有一个简单的技巧
<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>
刷新随机图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.