必须手动绑定keydown事件且轮播容器需设tabindex="0"并获得焦点，否则方向键无响应；需e.preventDefault()阻止页面滚动，用event.key判断ArrowLeft/ArrowRight及空格键，并在键盘操作时暂停自动播放。
必须手动绑定 keydown 事件，且轮播容器要能获得焦点——否则键盘事件根本不会触发。
为什么按方向键没反应？焦点和 preventDefault 是关键
常见现象是代码写了、event.key 判断也对，但就是没响应。核心问题通常只有两个：
-
carousel元素没设tabindex="0"，浏览器默认不可聚焦，keydown事件压根不会派发到它身上 - 没调用
e.preventDefault()，导致 macOS 或某些 Windows 浏览器下按方向键直接滚动页面，轮播逻辑被拦截 - 事件监听绑在子元素（比如
.carousel-inner）上，而非最外层容器；子元素无焦点能力，事件收不到
正确做法：给最外层 div.carousel 加 tabindex="0"，并在首次加载或用户点击后主动调用 carousel.focus() 确保焦点就位。
怎么监听 ArrowLeft / ArrowRight 而不是 keyCode？
keyCode 已废弃，必须用 event.key。它返回的是语义化字符串，不是数字码值，更稳定、可读性更强。
立即学习“前端免费学习笔记（深入）”；
示例逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
carousel.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
} else if (e.key === 'ArrowRight') {
e.preventDefault();
nextSlide();
}
});
注意：ArrowLeft 和 ArrowRight 是大小写敏感的字符串，不能写成 'arrowleft' 或带引号的数字。
空格键和 Shift+空格要不要加？
要加，尤其对屏幕阅读器用户和键盘导航习惯者更友好。空格键对应 e.key === ' '（就是一个空格字符），不是 'Space'。
- 单独按空格 → 触发
nextSlide() - 按住
Shift+ 空格 → 触发prevSlide() - 必须加
e.preventDefault()，否则空格会触发页面向下滚动 - 建议只在轮播已获得焦点时响应，避免全局干扰其他输入框
移动端注意：外接蓝牙键盘也会触发这些事件，但纯触摸设备不会。不用做设备 UA 判断，用 matchMedia('(hover: hover)') 粗略判断有无悬停能力即可辅助决策是否默认启用键盘控制。
自动播放和键盘操作怎么共存？
用户按了方向键，说明他想接管控制权——此时自动轮播必须暂停，否则会出现“刚切到第2张，2秒后又自动切到第3张”的冲突。
- 每次键盘触发
prevSlide()或nextSlide()后，立即clearInterval(carouselTimer) - 不重置定时器，而是等用户离开轮播区域（
mouseleave）或 5 秒无操作后再恢复 - 如果轮播支持
pause()/resume()方法，键盘操作后应调用pause()，而非粗暴清定时器 - 别在
keydown里重复启动新定时器——状态管理要集中，避免多个定时器并行
最易被忽略的一点：键盘控制必须和鼠标悬停暂停逻辑保持同步。焦点进入 + 鼠标悬停，都该暂停；焦点离开 + 鼠标移出，才考虑恢复——二者触发条件不同，但行为目标一致。
