我的随机数组函数的设置和调用哪里出错了？

Question

我可以循环函数 to display 5 random images。现在我想使用相同的 5 张图像并将它们随机播放，其中每张图像只出现一次（给出 5！= 120 个排列）。

我发现了很多关于如何打乱和显示随机数（不是图像）的技巧，但我认为我的问题是设置然后调用函数。我该怎么做？

假设：

在我的 <style> 标签之间，我需要定义随机播放功能
我的图像数组可以保持原样（因为它们是相同的，显然要确保从新的 URL 更新任何更改的引用）
随机播放函数在我的页面正文中被调用（我不确定这一点）

我想用简单的英语实现：

"Take the five images in the collection and put them, once only, into any order."

会发生什么：

出现五张图片，经常重复图片。

成功的网页是这样的：

    </style>
<script type="text/javascript">
// place your images in this array
var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function getRandomImage(imgAr, path) {
    path = path || '../Public/images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>
</head>
<body>

然后这个（我假设调用函数）

<div>
    <!-- This script segment displays an image from the array -->
    <script type="text/javascript">for (i = 0; i < 5; i++) getRandomImage(random_images_array, 'images/')</script>
</div>

我该如何解决这个问题？

Answer 1

以下内容打乱一组图片网址，然后将这些网址作为图片一张一张地添加到 DOM。

const $ = document.querySelector.bind(document)

function shuffle(arr) {
  for (let curr = arr.length - 1; curr >= 0; --curr) {
    const random = ~~(Math.random() * curr)
    ;[arr[random], arr[curr]] = [arr[curr], arr[random]]
  }
  return arr
}

function render(arr) {
  let html = "";
  for (let el of arr) {
    html += img`${el}`
  }
  $("#images").innerHTML = html
}

function img(_, url) {
  return `<img style="background:url(${url}); background-size:cover;"/>`
}

const arr = [
 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX//wCKxvRFAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUA/wA0XsCoAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg=="
]

$("button").addEventListener("click", () => render(shuffle(arr)))

render(shuffle(arr))

body {
  font-family: sans-serif;
  font-size: 0;
}
img {
  display: inline-block;
  width: 170px;
  height: 60px;
  box-shadow: 0 0 0 2px white inset;
  padding: 0;
  margin: 0;
}
button:focus { outline: none }
button {
  font-size: 1rem;
  border: none;
  background: rgb(0, 200, 200);
  border-radius: 5px;
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  width: 340px;
  padding: 0;
  margin: 0;
  color: white;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  box-shadow: 0 0 0 2px white inset;
}
#images {
  box-shadow: 0 0 0 2px silver inset;
  width:340px;
  height:120px;
}

<button>Shuffle!</button>
<section id="images"></section>

Answer 2

一位删除了他们答案的好心评论者给了我以下内容：

    var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function shuffleArray(arr) {
   for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
   }
}

// Shuffle images here
shuffleArray(random_images_array);

function getRandomImage(imgAr, path) {
   path = path || '../Public/images/'; // default path here
   for (var i = 0; i < imgAr.length; i++) {
      var img = imgAr[i];
      var imgStr = '<img src="' + path + img + '" alt = "">';
      document.write(imgStr);
      document.close();
   }
}

getRandomImage(random_images_array, 'images/')

而且成功了！谢谢神秘帮手！

我的随机数组函数的设置和调用哪里出错了？

Where is my setting and calling of a shuffle array function going wrong?

javascript

shuffle

image

function

method-call