最稳方案是只操作单个的src属性切换图片，用全局索引和data-index精准控制，避免innerhtml重建、display切换及textcontent解析数字等常见错误。
点击按钮切换单张 <img> 的 src
最稳、兼容性最好、也最容易调试的方案：只操作一个 <img> 元素，通过改它的 src 属性来换图。不需要显隐控制，不涉及 CSS 过渡或定位，连 display 都不用动。
常见错误是把索引变量声明在函数内部，导致每次点击都重置为 0；或者用 innerHTML 重建整个 DOM，既慢又丢事件绑定。
- 图片地址统一存进数组：
const images = ['a.jpg', 'b.jpg', 'c.jpg'] - 用
let currentIndex = 0声明在全局或闭包作用域，确保状态可延续 - 按钮点击时更新索引并赋值：
imgEl.src = images[currentIndex] - 切换前加校验：
if (currentIndex >= 0 && currentIndex ，避免越界报错 - 图片加载失败要兜底：
imgEl.onerror = () => { imgEl.src = 'fallback.jpg' }
data-index 比 innerText 可靠得多
给每个按钮加 data-index="0"、data-index="1"，而不是靠按钮文字（比如“1”“2”）去解析数字。后者在空格、换行、多语言或屏幕阅读器下极易出错。
- HTML 中写：
<button data-index="2">第三张</button> - JS 中取值必须用：
parseInt(event.target.dataset.index, 10)，不能省略第二个参数，否则"08"会被当八进制解析成 0 - 别用
event.target.textContent或.innerText转数字——它们返回的是渲染后文本，含不可见字符风险 - 所有按钮共用一个监听器，用事件委托更轻量：
document.querySelector('.controls').addEventListener('click', handler)
用 classList 切换多张图时的显隐陷阱
如果结构里有多个 <img> 并列（比如每张图一个 <img class="slide">），靠 classList.add('active') 控制显示，就很容易踩 Safari 和旧版 iOS 的坑。
- 千万别用
display: none+classList.toggle()：iOS Safari 对频繁切换display的重绘不敏感，可能出现“图没切但类已加”的假象 - 推荐方案：统一设
opacity: 0; pointer-events: none;，再用opacity: 1; pointer-events: auto;激活，过渡加在img上而非父容器 - 所有
transition必须写全：比如transition: opacity 0.4s ease, transform 0.4s ease，漏掉任意一项会导致动画中断 - 切换函数里先移除全部
active，再加当前项，顺序不能反，否则可能短暂出现两张图同时 visible
自动轮播和手动点击共存时的状态冲突
用户刚点完“第三张”，自动轮播却立刻切回“第四张”，体验断裂。这不是 bug，是逻辑优先级没管好。
核心原则：手动操作应暂停自动逻辑，至少暂停一轮。纯 CSS 方案可用 :hover 暂停，但 JS 方案得靠标记位。
- 定义一个布尔变量：
let isUserInteracted = false - 每次点击按钮后设为
true，并在自动轮播的setInterval回调开头加判断：if (isUserInteracted) return - 3 秒后自动重置：
setTimeout(() => isUserInteracted = false, 3000) - 更严谨的做法是用
clearInterval+ 重新setInterval，但要注意 timer 变量必须可被清除（不能匿名）
实际项目里，按钮点击只是起点；焦点管理、键盘支持（ArrowLeft/ArrowRight）、懒加载、宽高比锁定这些，才是真正容易被跳过的复杂点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
