如何用JavaScript+HTML实现图片与对应文字每5秒自动切换及代码问题排查

问题原因 #

你当前代码文字显示不正确是因为存在笔误：

var text = [], y=0;
text[0] = "MSG1";
text[1] = "MSG2";
text[1] = "MSG3"; // 这里重复给索引1赋值，覆盖了MSG2，且缺失索引2的文本

重复给text[1]赋值导致MSG2被覆盖，同时数组长度只有2，和3张图片无法对应，就会出现文字显示错误的问题。

优化实现方案 #

你的原有实现用了两个独立定时器，可能因为执行时间偏差出现图文不同步的问题，且分开维护两个数组容易出现对应错误，更高效的实现如下：
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <style>
        img {
            height: 500px;
            width: 450px;
        }
        h1 {
            color: darkgreen;
            margin-top: 20px;
            font-family: Comic Sans MS, cursive, sans-serif;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h1 id="message">Hello</h1>
                <img id="img" src="image1.jpg" >
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

    <script>
        // 轮播数据统一维护，图片和文字一一对应，避免错位
        const carouselData = [
            { img: "image1.jpg", text: "MSG1" },
            { img: "image2.jpg", text: "MSG2" },
            { img: "image3.jpg", text: "MSG3" }
            // 后续新增轮播项直接在这里加即可
        ]
        let currentIndex = 0
        // 提前缓存DOM节点，无需每次切换都查询DOM
        const imgEl = document.getElementById('img')
        const textEl = document.getElementById('message')
        const switchInterval = 6000 // 切换间隔统一配置，修改方便

        function switchCarousel() {
            // 更新索引
            currentIndex = (currentIndex + 1) % carouselData.length
            // 同步更新图片和文字
            imgEl.src = carouselData[currentIndex].img
            textEl.textContent = carouselData[currentIndex].text
            // 下一次切换
            setTimeout(switchCarousel, switchInterval)
        }

        // 启动轮播
        setTimeout(switchCarousel, switchInterval)
    </script>
</body>
</html>

优化点说明 #

• 图文数据绑定为对象数组，新增/修改轮播内容只需要修改一处，不会出现图文对应错误
• 单个定时器控制切换，完全避免图文不同步的问题
• DOM节点只查询一次，重复使用降低性能消耗
• 切换间隔统一配置，修改时不需要多处调整
• 避免给setTimeout传入字符串，消除eval执行带来的安全隐患和性能损耗

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