用setInterval切换img.src实现轮播，需取模循环索引防越界；用户交互时暂停并恢复定时器；预加载Image对象避免闪屏；还需处理加载失败、无障碍访问及移动端事件冲突。
直接用 setInterval + 操作 src 属性就能跑起来，但要注意图片预加载和用户交互中断的问题。
轮播逻辑：用 setInterval 切换 img.src
最简实现是维护一个索引，定时更新 img 元素的 src。不需要框架、不依赖 CSS 动画也能生效：
let index = 0;
const images = ['1.jpg', '2.jpg', '3.jpg'];
const imgEl = document.getElementById('carousel-img');
function changeImage() {
imgEl.src = images[index];
index = (index + 1) % images.length;
}
const timer = setInterval(changeImage, 3000);
- 务必用取模
% images.length实现循环，否则越界后src变成undefined，控制台报错GET undefined 404 - 不要在
changeImage里写imgEl.onload = ...—— 每次切换都绑定新事件会堆积监听器 - 如果图片路径是相对路径，确保它们真能被浏览器加载（检查 Network 面板 404）
用户操作时暂停轮播：监听鼠标和焦点事件
自动轮播遇到用户手动操作（比如 hover 或点击左右按钮）必须暂停，否则体验割裂。关键不是“停”，而是“恢复”要可靠：
- 用
clearInterval(timer)停止，但别忘了保存 timer ID，且只清一次 - 推荐在
mouseenter和focusin（支持键盘 tab 进入）时暂停，在mouseleave和blur后延迟重启（避免抖动），例如：imgEl.addEventListener('mouseenter', () => clearInterval(timer)); imgEl.addEventListener('mouseleave', () => timer = setInterval(changeImage, 3000)); - 如果加了左右翻页按钮，点击后也要重置索引并重启定时器，否则可能跳图
图片闪屏或加载慢？必须预加载 Image 对象
直接改 src 会导致空白闪一下，尤其在弱网下。解决方法是提前用 new Image() 加载所有图片：
立即学习“Java免费学习笔记（深入）”；
const cacheImages = images.map(src => {
const img = new Image();
img.src = src;
return img;
});
- 预加载后，切换时直接赋值
cacheImages[index].src，浏览器从缓存取，无白屏 - 不用等
img.onload再启动轮播 —— 首图可先设为占位符，其余后台静默加载 - 如果图片体积大，预加载可能阻塞主线程，建议用
loading="lazy"（仅首图）+ 其余用fetch()+createObjectURL()替代（进阶场景）
真正难的不是切图，而是处理加载失败、屏幕阅读器兼容、键盘导航焦点管理、以及移动端 touch 事件与 click 的冲突——这些不加控制，轮播就只是个会动的 bug 集合。
