有没有更简单的方法来加载随机图像

Question

我认为我没有正确解释这一点，但我最终回答了我自己的问题，基本上我正在寻找删除头部代码，因为它使文档看起来很丑，并且每次滚动时都非常乏味，我将 head javascript 代码放入它的文件中并从索引头部分删除代码，它似乎工作得很好。

谢谢大家的帮助！

/关闭/回答

任何人都可以指出一种更简单的方法在我的索引.html页面上加载随机图像吗？

这是我正在使用的当前方法

在头部部分：

// It currently goes to css/images/images/410.png, I have just put six here so it isn't long and annoying
<script type="text/javascript">
var imageURLs = [
   "css/images/avatars/1.png"
 , "css/images/avatars/2.jpg"
 , "css/images/avatars/3.png"
 , "css/images/avatars/4.png"
 , "css/images/avatars/5.png"
 , "css/images/avatars/6.png"
 ];
 function getImageTag() {
 var img = '<img src="';
 var randomIndex = Math.floor(Math.random() * imageURLs.length);
 img += imageURLs[randomIndex];
 img += '" alt="Oh no, the image is broken!"/>';
 return img;
 }
 </script>

在正文部分中：

    <!-- RANDOM IMAGE 1 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>
    <!-- RANDOM IMAGE 2 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>

我目前总共有 410 张图片，所以你可以想象它在头部部分代码中有多烦人

Answer 1

如果你的图像都是这样命名的，这应该可以工作：

<script type="text/javascript">
var imagesCount = 410;
 function getImageTag() {
 var img = '<img src="css/images/avatars/';
 var randomIndex = 1+Math.floor(Math.random() * imagesCount );
 img += randomIndex;
 img += '.png" alt="Oh no, the image is broken!"/>';
 return img;
 }
 </script>