<meta http-equiv="refresh"> 不适合做幻灯片，因其强制整页刷新、丢失状态、无过渡效果、遭浏览器限制、SEO差且无触摸支持；推荐用原生JS控制display或opacity切换。
用 <meta http-equiv="refresh"> 做幻灯片切换，只能实现最基础的页面级跳转轮播，不推荐用于现代网页——它会强制刷新整个页面、破坏状态、无法控制过渡、SEO 友好性差，且在多数浏览器中会被视为干扰行为而限制或屏蔽。
为什么 <meta http-equiv="refresh"> 不适合做幻灯片
这个标签本质是让浏览器在指定秒数后重新加载当前页或跳转到新 URL，不是动画控制机制：
- 每次切换都会触发完整页面重载（哪怕只是换一张图），
JavaScript状态、表单输入、滚动位置全部丢失 - 无法添加淡入/滑动等 CSS 过渡效果，视觉生硬
- Chrome、Edge 等现代浏览器对频繁
refresh有干预策略（如延迟执行、弹出提示），尤其在后台标签页中可能完全失效 - 搜索引擎抓取时可能只收录首屏，后续“幻灯片”内容不可见
- 移动端容易触发双击缩放误操作，且无触摸控制能力
替代方案：用 setTimeout + display 切换更可靠
如果必须零依赖、不引入框架，用原生 JS 控制 DOM 显示隐藏是最小可行解：
<div id="slide-1" class="slide"><img src="1.jpg"></div>
<div id="slide-2" class="slide active"><img src="2.jpg"></div>
<div id="slide-3" class="slide"><img src="3.jpg"></div>
<style>
.slide { display: none; }
.slide.active { display: block; }
</style>
<script>
const slides = document.querySelectorAll('.slide');
let index = 1; // 当前显示第几个（从 0 开始则设为 0）
function showSlide(n) {
slides.forEach((s, i) => s.classList.toggle('active', i === n));
}
function nextSlide() {
index = (index + 1) % slides.length;
showSlide(index);
}
// 每 4 秒切一张
setInterval(nextSlide, 4000);
</script>
关键点：
- 所有图片在同一 HTML 页面内，不触发页面刷新
-
display: none/block切换快、兼容性好（IE8+ 都支持） - 可随时通过
clearInterval暂停，或绑定按钮手动切换 - 若需淡入效果，把
display换成opacity+transition，再配合visibility控制交互区域
真要硬用 <meta http-equiv="refresh">？注意这些坑
仅限静态演示、内网展示或遗留系统维护场景。必须遵守：
- 刷新时间不能低于 3 秒，否则 Chrome 会拦截并显示“此页面正尝试重定向”警告
- 目标必须是同域下真实存在的 HTML 文件（如
slide1.html→slide2.html），不能是相对路径错误或 404 - 每个子页面都得带独立的
<meta>标签，且时间值一致，否则切换节奏错乱 - 禁止在
<head>中写多个refresh，浏览器只认第一个 - 示例写法（放在
slide1.html的<head>内）：<meta http-equiv="refresh" content="5; url=slide2.html">
真正需要平滑、可控、可访问的幻灯片，应该用 requestAnimationFrame 或轻量库如 Swiper、KeenSlider。而 <meta refresh> 这种方式，现在只剩下一个价值：帮你快速验证一个想法是否值得继续投入——如果连它都跑不稳，就别往下写了。
