求助：如何实现每10秒切换显示/隐藏5个HTML iFrames

完整代码示例 #

下面是直接可用的代码，包含HTML结构、基础样式和切换逻辑，适合新手理解：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>IFrame轮播切换</title>
    <style>
        /* 给iframe设置统一样式，避免布局混乱 */
        .iframe-item {
            width: 800px;
            height: 600px;
            border: none;
            display: none; /* 默认所有iframe隐藏 */
        }
        /* 初始显示第一个iframe */
        .iframe-item.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 5个iframe，替换成你需要的链接 -->
    <iframe class="iframe-item active" src="链接1"></iframe>
    <iframe class="iframe-item" src="链接2"></iframe>
    <iframe class="iframe-item" src="链接3"></iframe>
    <iframe class="iframe-item" src="链接4"></iframe>
    <iframe class="iframe-item" src="链接5"></iframe>

    <script>
        // 获取所有iframe元素
        const iframes = document.querySelectorAll('.iframe-item');
        let currentIndex = 0; // 当前显示的iframe索引

        // 定义切换函数
        function switchIframe() {
            // 隐藏当前显示的iframe
            iframes[currentIndex].classList.remove('active');
            // 计算下一个要显示的索引，到最后一个后回到第一个
            currentIndex = (currentIndex + 1) % iframes.length;
            // 显示下一个iframe
            iframes[currentIndex].classList.add('active');
        }

        // 每10秒执行一次切换函数
        setInterval(switchIframe, 10000);
    </script>
</body>
</html>

关键部分解释 #

• HTML结构：给所有iframe加统一的iframe-item类，第一个额外加active类用来初始显示。
• CSS样式：通过display: none和display: block控制显示隐藏，active类标记当前显示的iframe。
• JavaScript逻辑：
  1. 用querySelectorAll获取所有iframe元素
  2. 用currentIndex记录当前显示的iframe位置
  3. switchIframe函数负责切换：先隐藏当前的，再更新索引，最后显示新的
  4. setInterval设置每10000毫秒（10秒）调用一次切换函数，实现自动轮播

自定义调整 #

• 可以修改CSS里的width和height来调整iframe的大小
• 把src属性的值换成你实际需要加载的网页链接
• 如果要修改切换间隔，把setInterval的第二个参数改成对应的毫秒数（比如5秒就是5000）

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