I have a list of images that the code cycles through and displays indefinitely.

I want it to slow down and stop on a random image in the list.

Can anyone help me with this?

This is what I have so far:

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

The funtion:

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] + "')"
    // }
}

This is the result: