轮播图左右箭头须手动添加button元素并绑定事件，实现currentIndex索引控制、边界处理、CSS/SVG绘制、a11y支持（aria-label、disabled）、touchstart兼容及焦点管理。
轮播图左右箭头需要自己写 DOM 元素，不能靠 autoplay 或 loop 自动出来
HTML 原生 没有内置的 function showItem(index) {
items.forEach((item, i) => {
item.style.display = i === index ? 'block' : 'none';
});
} function next() {
currentIndex = (currentIndex + 1) % total; // 循环模式
showItem(currentIndex);
} function prev() {
currentIndex = (currentIndex - 1 + total) % total;
showItem(currentIndex);
} 仅加 click 事件不够。键盘用户按 在 iOS 和部分安卓机型上， 立即学习“前端免费学习笔记（深入）”； 实际交互中，最常漏掉的是焦点管理（比如切换后不把 或
，避免触发表单提交
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;
% total 实现无缝循环；若想停在首尾，改用 Math.max(0, Math.min(total - 1, currentIndex + 1))
showItem(0)，否则所有项都可能隐藏opacity 或 transform 切换，就别用 display: none，否则会丢失过渡动画箭头按钮的可访问性（a11y）容易被忽略
Tab 进入按钮后，需回车/空格触发，且屏幕阅读器应能识别功能。原生 已自带这些能力，但若用
aria-label，例如 aria-label="上一张" 和 aria-label="下一张"
disabled 属性（），而非仅靠 CSS 灰掉 + pointer-events: none
移动端点击区域太小，
touchstart 比 click 更可靠click 有约 300ms 延迟，且小按钮容易误触。直接监听 touchstart 可提升响应速度和准确率，同时兼容鼠标设备只需加一层判断。const nextBtn = document.querySelector('.carousel-next');
nextBtn.addEventListener('touchstart', handleNext, { passive: true });
nextBtn.addEventListener('click', handleNext);
{ passive: true } 避免阻止默认滚动行为，提升滑动流畅度touchstart 和 click 后再用 preventDefault()，会导致桌面端失效focus() 移到当前项）和自动播放暂停逻辑。这两处不影响功能，但会让键盘或屏幕阅读器用户迷失在轮播里。
