轮播图左右箭头须手动添加button元素并绑定事件，实现currentIndex索引控制、边界处理、CSS/SVG绘制、a11y支持（aria-label、disabled）、touchstart兼容及焦点管理。
轮播图左右箭头需要自己写 DOM 元素，不能靠 autoplay 或 loop 自动出来
HTML 原生 <img> 或 <figure> 列表本身不带控制键，左右箭头必须手动添加两个 <button> 或 <div>，并绑定点击事件。浏览器不会自动渲染“上一张/下一张”按钮，这是常见误解。
- 箭头按钮建议用
<button type="button">，避免触发表单提交 - 位置通常绝对定位在轮播容器两侧，需配合
position: relative在父容器上 - 不要用图片路径写死箭头（如
arrow-left.png），优先用 CSS 绘制或 SVG 内联，减少请求
next() 和 prev() 函数必须手动实现索引逻辑
没有内置的 next() 方法可用。你需要维护一个当前索引 currentIndex，并在点击时更新它，再切换显示的图片。边界处理（首尾循环 or 停止）要显式判断。
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const total = items.length;
<p>function showItem(index) {
items.forEach((item, i) => {
item.style.display = i === index ? 'block' : 'none';
});
}</p><p>function next() {
currentIndex = (currentIndex + 1) % total; // 循环模式
showItem(currentIndex);
}</p><p>function prev() {
currentIndex = (currentIndex - 1 + total) % total;
showItem(currentIndex);
}- 用
% total实现无缝循环；若想停在首尾，改用Math.max(0, Math.min(total - 1, currentIndex + 1)) - 记得在初始化时调用一次
showItem(0)，否则所有项都可能隐藏 - 如果轮播项用
opacity或transform切换，就别用display: none，否则会丢失过渡动画
箭头按钮的可访问性（a11y）容易被忽略
仅加 click 事件不够。键盘用户按 Tab 进入按钮后，需回车/空格触发，且屏幕阅读器应能识别功能。原生 <button> 已自带这些能力，但若用 <div role="button"> 就必须手动补全。
- 左右按钮必须有明确的
aria-label，例如aria-label="上一张"和aria-label="下一张" - 禁用状态（如第一张时左箭头不可点）要用
disabled属性（<button disabled>），而非仅靠 CSS 灰掉 +pointer-events: none - 若轮播自动播放，建议加个“暂停”按钮，并在焦点进入轮播区域时暂停，移出后恢复（WCAG 要求）
移动端点击区域太小，touchstart 比 click 更可靠
在 iOS 和部分安卓机型上，click 有约 300ms 延迟，且小按钮容易误触。直接监听 touchstart 可提升响应速度和准确率，同时兼容鼠标设备只需加一层判断。
立即学习“前端免费学习笔记（深入）”；
const nextBtn = document.querySelector('.carousel-next');
nextBtn.addEventListener('touchstart', handleNext, { passive: true });
nextBtn.addEventListener('click', handleNext);-
{ passive: true }避免阻止默认滚动行为，提升滑动流畅度 - 不要同时绑定
touchstart和click后再用preventDefault()，会导致桌面端失效 - 箭头按钮最小尺寸建议 ≥ 44×44px（iOS 触控热区标准）
实际交互中，最常漏掉的是焦点管理（比如切换后不把 focus() 移到当前项）和自动播放暂停逻辑。这两处不影响功能，但会让键盘或屏幕阅读器用户迷失在轮播里。
