Tengo una lista de imágenes que el código recorre y muestra indefinidamente.

Quiero que disminuya la velocidad y se detenga en una imagen aleatoria de la lista.

Puede alguien ayudarme con esto?

Esto es lo que tengo hasta ahora:

 <div id="imgSelect" class="imgSelect"> <div id="img" class="img"> <img id="imgDisplay" class="imgInside" imgalt="rArrowback"> </div> <div id="select" class="select"> <button id="selectBtn" type="button" class="btnSelect">GO!</button> </div> </div>

la función:

 var imgArray = new Array(); for (var i = 0; i < 60; i++) { imgArray[i] = './imgs/' + i + '.png'; } document.getElementById("imgDisplay").style.backgroundImage = "url('qm.png')" function selectImg() { document.getElementById("imgDisplay").style.backgroundImage = 'none' var rotator = document.getElementById("imgDisplay"); var delayInSeconds = 1; var num = 0; var changeImage = function () { var len = imgArray.length; rotator.src = imgArray[num++]; if (num == len) { num = 0; } }; setInterval(changeImage, delayInSeconds * 100); // for (var i = 0; i < 60; i++) { // document.getElementById("imgDisplay").style.backgroundImage = "url('" + imgArray[i] + "')" // } }

Este es el resultado: