JavaScript实现连续切换图片序列，点击目标图时停止并触发弹窗求助

需求说明 #

现有24张图片，ID分别为q1至q24，当前代码可实现每隔500毫秒将这24张图片逐个切换为question2.png（其余图片显示question.jpg）。需要新增功能：点击当前显示的question2.png图片时，停止自动切换序列，并弹出提示框/显示文本。

修改后的完整代码 #

<script>
{
    let num = 1;
    // 保存定时器ID，用于后续停止自动切换
    const intervalId = setInterval(sequence, 500);

    function sequence()
    {
        let back = 1;
        while (back < 25)
        {
            if(back == 1)
            {
                document.getElementById("q24").src = "question.jpg"; 
            }
            else
            {
                document.getElementById("q" + (back-1)).src = "question.jpg"; 
            }

            back++
        }

        const currentImg = document.getElementById("q" + num);
        currentImg.src = "question2.png";
        // 给当前显示的目标图片绑定点击事件
        currentImg.onclick = stopSequenceAndAlert;
        
        num = num + 1;
        if(num > 24){num = 1;}
    }

    function stopSequenceAndAlert() {
        // 清除定时器，停止自动切换
        clearInterval(intervalId);
        // 弹出提示框，可替换为页面文本显示
        alert("点击成功！自动切换已停止");
        // 若要显示文本而非弹窗，可替换为以下代码（需提前在页面添加id为tip的元素）
        // document.getElementById("tip").textContent = "点击成功！自动切换已停止";
    }
}
</script>

关键修改说明 #

• 新增intervalId变量存储定时器标识，通过clearInterval可终止自动切换序列。
• 新增stopSequenceAndAlert函数，负责执行停止切换和触发提示的逻辑。
• 每次切换图片时，给当前显示question2.png的图片绑定点击事件，确保点击目标图片时触发停止操作。

内容的提问来源于stack exchange，提问作者Icy