如何设置幻灯片中的计时器以显示为选中状态？

Question

我必须创建一个幻灯片，使用一组图像并将其设置在计时器上。有一个下拉菜单，其中包含慢速、中速和快速选项，图片需要根据所选的下拉选项进行转换。每当我在网络浏览器中执行此代码时，当我在控制台中读取 i 的值时，代码会重复自身，同时加倍。

我试过使用 while 和 do-while 循环让图像旋转。

我也试过将 if 语句放在外面，below/above 函数。

<script>
var i = 0;
function changeImg(){
    if (x == 'slow'){
        setInterval("changeImg()", 5000);
    } else if (x == 'medium'){
        setInterval("changeImg()", 3000);
    } else if (x == 'fast') {
        setInterval("changeImg()", 1000);
    } else {}

        while (i < 3){
            console.log(i);
            document.slide.src = sportsArray[i];
            i++;
        }

        console.log(i);
        console.log(sportsArray);
    }
</sctipt>

Answer 1

首先，我会在 setInterval() and clearInterval 上阅读 MDN 的文档，以填补导致您以这种方式解决问题的知识空白。

您在代码中递归调用 changeImg()，我认为这导致了您描述的问题：

the code repeats itself, while doubling, as I read the value of i in the console

此外，您的 while 循环将在调用 changeImg() 时立即运行，这在这种情况下似乎也不理想。

setInterval() 本质上模仿了 while 循环。此代码中不需要 while 循环。下面是一个解决方案，希望大家可以参考。我把判断区间的代码分离成一个函数getIntervalSpeed。

function changeImg(x) {
    var getIntervalSpeed = function(x) {
        if (x === 'slow') {
            return 5000;
        } else if (x === 'medium') {
            return 3000;
        } else if (x === 'fast') {
            return 1000;
        } else {
            return 3000;
            // return a default interval if x is not defined
        }
    };

    var i = 0;

    var slideShow = setInterval(function() {
        if (i >= sportsArray.length) {
            i = 0; // reset index
        }

        document.slide.src = sportsArray[i]; // set the slide.src to the current index
        i++; // increment index
    }, getIntervalSpeed(x));

    // on click of ANY button on the page, stop the slideshow
    document.querySelector('button').addEventListener('click', function() {
        clearInterval(slideShow);
    });

}

如何设置幻灯片中的计时器以显示为选中状态？

How can I set timers in slideshow to show as selected?

javascript

arrays

loops

timer

slideshow