纯html+css无法实现真正可用的轮播图，因缺乏状态管理、交互响应和可访问性支持；必须用javascript控制currentindex、同步dom、处理边界与无障碍。
纯 HTML + CSS 能做轮播图，但无法实现自动切换、滑动动画或用户交互（如点击箭头、指示器），必须引入 JavaScript；如果只用 <input type="radio"> 模拟，属于“伪轮播”，有严重可访问性和响应式缺陷。
为什么不能只靠 HTML 和 CSS 实现真正可用的轮播图
CSS 动画（@keyframes）只能做固定时序循环，无法暂停、跳转、响应鼠标悬停或触摸操作；HTML 本身没有状态管理能力，<input type="radio"> 方案依赖相邻兄弟选择器（~），一旦 DOM 结构微调（比如加个 <div> 包裹）就立即失效；且焦点管理混乱，键盘用户无法用 Tab 切换图片，屏幕阅读器会误读为多个单选按钮组。
<h3>
<code>querySelectorAll + setInterval 是最简可行起点
用原生 JS 控制轮播状态，代码轻、无依赖、易调试。核心逻辑是维护一个当前索引 currentIndex，定时更新并同步 DOM：
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const total = slides.length;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
}
setInterval(() => {
currentIndex = (currentIndex + 1) % total;
showSlide(currentIndex);
}, 3000);
- 必须给每张图加统一 class（如
.slide），且其中一张带.active -
showSlide中用classList.toggle('active', condition)确保仅当前项激活，避免手动remove/add出错 - 模运算
% total防止索引越界，比if (currentIndex >= total) currentIndex = 0更简洁可靠
添加左右箭头和指示器的关键细节
箭头只需绑定 click 事件并修改 currentIndex，但要注意：必须在更新索引后立刻调用 showSlide，否则界面不同步；指示器（如小圆点）建议用 data-index 绑定，避免依赖 DOM 顺序：
<div class="indicators"> <button data-index="0" aria-label="Go to slide 1"></button> <button data-index="1" aria-label="Go to slide 2"></button> </div>
- 所有交互操作（箭头、指示器、自动轮播）必须共用同一套
currentIndex和showSlide，否则状态分裂 - 为防连续点击导致计时错乱，
setInterval的句柄应保存为变量，并在每次手动切换后clearInterval再重设（或改用setTimeout递归） - 移动端需监听
touchstart/touchend计算滑动方向，仅靠click无法响应快速滑动
真实项目中容易被忽略的三个硬性问题
轮播图不是“做完能动就行”。上线前必须验证：
- 当页面被切换到后台标签页时，
setInterval仍运行，可能造成资源浪费甚至状态错乱——应监听visibilitychange暂停/恢复 - 图片未加载完成时，
slides.length可能为 0 或部分为空——需确保 DOM 就绪后再初始化，或用img.onload做兜底 - 无障碍要求：轮播容器需加
role="region"和aria-live="polite"，每次切换要触发aria-live区域更新，否则屏幕阅读器不会播报
轮播图的复杂度不在切换逻辑，而在边界控制、状态同步和可访问性补全；少写一行 clearInterval 或漏掉一个 aria-hidden，都可能让功能在特定场景下完全不可用。
