用classlist管理img显隐更可控：初始移除所有.active类，仅为目标元素添加；配合css过渡实现淡入淡出；需确保父容器position: relative防重叠抖动。
用 JavaScript 控制 img 元素的显隐实现轮播
直接操作 DOM 的 img 元素比用 CSS 动画或第三方库更轻量，也更容易调试。核心就是切换一组 img 的 style.display 或 style.opacity，同时控制定时器和手动切换逻辑。
常见错误是没清空上一个定时器，导致多次点击后轮播加速；或者没限制索引越界，currentIndex 跑成 -1 或超出数组长度。
- 所有
img初始设为style.display = 'none'，仅当前项设为'block' - 用
setInterval启动自动轮播，但每次调用next()或prev()前必须clearInterval重置 - 索引更新后立即取模：
currentIndex = (currentIndex + 1) % images.length，避免手写if判断边界 - 给
img加alt和loading="lazy"，兼顾可访问性与性能
如何用 classList 替代内联样式做状态管理
硬写 style.display 容易和 CSS 冲突，尤其当图片容器有 flex/grid 布局时。改用 class 切换更可控，也方便加过渡动画。
比如定义 CSS：
.slide { opacity: 0; transition: opacity 0.3s; }<br>.slide.active { opacity: 1; }然后 JS 只管增删 active 类。
- 初始化时对所有
img调用element.classList.remove('active') - 只对目标元素调用
element.classList.add('active') - 避免用
className = 'active'——会清掉其他 class - 如果要淡入淡出效果，确保父容器有
position: relative，防止图片重叠时布局抖动
为什么 querySelectorAll('img') 拿不到动态插入的图片
如果你的轮播图是通过 AJAX 加载、或由框架（如 Vue/React）渲染的，document.querySelectorAll('img') 在脚本执行时可能还没生成 DOM 节点，结果拿到空 NodeList。
这不是轮播逻辑的问题，是执行时机问题。别急着封装函数，先确认节点是否存在：
- 加个简单检测：
const images = document.querySelectorAll('.carousel img'); console.assert(images.length > 0, '轮播图片未找到'); - 若图片异步加载，把轮播初始化逻辑包进
DOMContentLoaded或load事件里 - 框架场景下，等组件挂载完成（如 Vue 的
mounted，React 的useEffect）再调用初始化函数 - 不要依赖全局变量存图片列表，每次切换前都重新查一次（或缓存但带存在性检查）
手动切换按钮点击失效的典型原因
最常踩的坑是事件监听器绑在了被频繁替换/重渲染的元素上，或者用了匿名函数导致无法 removeEventListener。
- 按钮用
id或data-action属性区分：<button data-action="next"></button>，统一委托到父容器 - 避免：
nextBtn.onclick = function() {...}——重复绑定会覆盖 - 推荐：
nextBtn.addEventListener('click', next, false)，且next是具名函数 - 移动端记得加
touchstart事件，或用pointerdown兼容两者 - 点击后立刻禁用按钮 300ms（
btn.disabled = true; setTimeout(() => btn.disabled = false, 300)），防连点
console.log 确认图片数组长度和当前索引值，比瞎调 CSS 有效得多。
