减慢图像循环旋转到最终随机停止答案

【问题标题】：Slow down image cycle rotation to eventual random stop减慢图像循环旋转到最终随机停止
【发布时间】：2022-01-12 05:16:40
【问题描述】：

我有一个图像列表，代码循环并无限期地显示。

我希望它放慢速度并停在列表中的随机图像上。

谁能帮我解决这个问题？

这是我目前所拥有的：

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

功能：

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

这是结果：

【问题讨论】：

标签： javascript arrays javascript-objects

【解决方案1】：

使用 Javascript 提供的random 函数。

就在计时器之后放rotator.src = imgArray[Math.floor(Math.random() * imgArray.length)];

【讨论】：