Losowy wyświetlacz obrazu, bez powtórzeń, z Javascriptem

Wiem, że jest już kilka takich pytań, ale po prostu nie mogę zastosować żadnej z tych odpowiedzi (to jest mój pierwszy raz, kiedy robię coś takiego). Obecnie mam stronę, na której po naciśnięciu przycisku pojawia się losowy obraz (dzięki niektórym wspaniałym postom tutaj działa). Mój problem polega na tym, że liczba losowa ma wiele powtórzeń przed obejrzeniem wszystkich obrazów. Chcę zrobić to, gdzie wszystkie obrazy są widoczne (w losowej kolejności) przed jakimikolwiek duplikatami. To jest to, co jest w ciele:

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

Oto skrypt:

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

Z tego, co przeczytałem, sposobem na to byłoby dodanie przyprawy i pokazanie obrazów upuszczonych do nowej tablicy, a gdy oryginalna tablica równa się 0, należy ją zresetować. Spróbuj, jak mogłem, nie udało mi się z powodzeniem zintegrować tego z moim kodem :(. To właśnie skończyło się (co nic nie robi i całkowicie przerywa funkcję):

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

Inną wspomnianą metodą wydawało się być funkcja, która najpierw potasowała obrazy, a następnie wyświetliła je w kolejności tasowania, a następnie przetasowała i powtórzyła, ale jeszcze bardziej mi się to nie udało.

Wydaje się również, że istnieje pewne pytanie, czy losowa liczba max powinna być sama w sobie imagesArray.length, czy +1 lub -1. Jestem pewien, że jest z tym wiele innych problemów, ale jak powiedziałem, to jest moja pierwsza próba. Każda pomoc jest doceniana.

questionAnswers(1)

yourAnswerToTheQuestion