按钮必须用 <button> 而非 <a> 或 <div>，因其原生支持可访问性、键盘操作（Tab/Enter/Space）和禁用状态；需设 type="button"、aria-label、节流防连点、disabled 与 aria-disabled="true" 并用、图标用带 aria-hidden="true" 的 SVG 或字体图标，并在移动端监听 touchstart + preventDefault 防延迟与误触。
按钮必须用 <button> 而不是 <a> 或 <div>
很多开发者随手用 <a href="#"> 或带 onclick 的 <div> 实现切换按钮，结果遇到焦点管理失效、键盘无法触发（如 Tab + Enter）、屏幕阅读器识别错误等问题。浏览器原生 <button> 自动支持可访问性语义、空格/Enter 键响应、禁用状态样式，且不会意外触发页面跳转或滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 左右按钮统一用
<button type="button">，显式声明type="button"防止表单提交误触发 - 添加
aria-label，例如aria-label="上一张图片"和aria-label="下一张图片" - 若组件支持键盘导航，确保按钮在 Tab 顺序中位置合理（通常左按钮在前，右按钮在后）
按钮事件监听要防重复点击和快速连点
用户连续猛点右箭头，可能触发多次 next()，导致滑块跳过中间项、索引越界甚至报错 Cannot read property 'style' of undefined。这不是 UI 问题，而是状态同步没兜住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在点击处理函数开头加节流或锁机制，例如设置
isTransitioning = true，动画结束回调再置为false - 禁用按钮期间仍需保持可访问性：用
disabled属性（而非仅 CSS 灰色），并配合aria-disabled="true" - 避免直接绑定
onclick行内属性，统一用addEventListener，方便后续解绑或复用
按钮图标要用 SVG 或 aria-hidden 的字体图标
用 Unicode 字符（如 "‹" / "›"）或未包裹 aria-hidden="true" 的字体图标，会导致读屏软件朗读“尖括号”或“iconfont”，干扰语义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先使用内联 SVG，结构清晰且可配色：
<svg aria-hidden="true" width="12" height="20"><path d="M10 5L3 12l7 7"/></svg>
- 若用字体图标（如 Font Awesome），必须加
aria-hidden="true"，且不依赖纯视觉符号表达功能 - 图标旁不加冗余文字（如“← 上一张”），靠
aria-label提供完整语义即可
移动端需额外处理 touchstart + preventDefault
在 iOS Safari 或部分安卓浏览器中，click 事件有约 300ms 延迟，且 <button> 默认会触发高亮背景，影响体验；更麻烦的是，手指按住拖动时可能误触发点击。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart并立即调用e.preventDefault()，阻止默认高亮和延迟 - 为防误触，可加简单判断：只在
touchend且位移 - 不要移除
click事件——保留它兼容桌面端和部分旧移动设备
type="button" 的按钮让整个组件在表单里意外提交。 
