随机图像显示，无重复，使用Javascript

我知道已经有几个这样的问题了，但我似乎无法应用任何答案（这是我第一次做这样的事情）。我目前有一个页面，当按下按钮时，会出现一个随机图像（多亏了这里的一些很棒的帖子，这实际上是有效的）。我的问题是，在看到所有图像之前，随机数有很多重复。我想在复制之前先看到所有图像（按随机顺序）。这就是身体里的东西：

<form name="imageForm">
  <table border=3>
   <tr align="center">
    <td>
      <input onclick="displayImage();" type=button value="Click Here">
    </td>
  </tr>
  <tr>
    <td>
      <img src="blank.jpg" name="canvas" />
    </td>
  </tr>
  </table>
</form>

这是脚本：

<script language="javascript">
var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];
function displayImage(){
    var num = Math.floor(Math.random() * (imagesArray.length));
    document.canvas.src = imagesArray[num];
    }
</script>

根据我所读到的，实现这一点的方法是添加一个香料，并将图像显示到一个新数组中，然后一旦原始数组等于0，就将其重置。尽管我可能会尝试，但我还是没能成功地将其集成到我的代码中：（.这就是我最终得到的结果（它什么都不做，完全破坏了功能）：

<script>
var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];
var shownImages = []
function displayImage(){
    var num = Math.floor(Math.random() * (imagesArray.length));
    document.canvas.src = imagesArray[num];
    shownImages.unshift(imagesArray.splice(num,num+1));
    if(images.length == 0){
     images.Array = shownImages;
     shownImages = [];
     return shownImages[0];
    }
</script>    

提到的另一种方法似乎是有一个功能，先将图像打乱，然后按打乱的顺序显示，然后重新排列并重复，但我在这方面做得更少。

对于随机数max本身应该是imagesArray.length，还是+1或-1，似乎也存在一些问题。我相信这也有很多其他问题，但正如我所说，这是我的第一次尝试。感谢您的帮助。