按钮应紧贴幻灯片内容边缘（左/右各留16px），垂直居中，确保44×44px点击热区；键盘焦点顺序为prev→内容→next；禁用状态须用disabled属性+aria-disabled="true"，不可仅靠视觉灰显。
按钮位置该放哪？别默认塞在底部居中
幻灯片按钮放错位置，用户第一眼找不到、手指点不到、键盘 Tab 顺序混乱——这比样式丑更致命。真实场景里，左右箭头必须紧贴内容边缘，且留出足够点击热区（至少 44×44px），尤其在触屏设备上。
常见错误现象：margin: 0 auto 把按钮居中堆在底部，结果用户滑动后要反复上下找；或用 position: absolute 但没设 bottom: 20px，导致按钮被内容遮挡或随滚动消失。
- 推荐方案：给幻灯片容器设
position: relative，左右按钮分别用position: absolute+top: 50%+transform: translateY(-50%)垂直居中，左按钮加left: 16px，右按钮加right: 16px - 移动端必须加
touch-action: manipulation，避免 Safari 拦截快速连点 - 键盘焦点顺序要匹配视觉顺序：先
prev，再内容区，最后next；用tabindex="0"显式声明可聚焦，别依赖 DOM 顺序碰运气
按钮样式怎么写才不“假”？避开纯 CSS 圆角+阴影陷阱
太多人用 border-radius: 50% + box-shadow 做“现代感”箭头按钮，结果在深色背景上看不见、高对比度模式下失焦、打印时糊成一团——这不是设计，是埋雷。
真正可用的按钮样式，核心是「识别性＞装饰性」：箭头符号必须语义清晰、尺寸足够、颜色与背景有明确对比度（至少 4.5:1）。
立即学习“前端免费学习笔记（深入）”；
- 图标优先用 SVG 内联，而不是字体图标（如
←或第三方 icon font），避免加载失败后只剩空白方块 - 禁用
outline: none—— 如果你删了默认焦点框，必须用box-shadow: 0 0 0 3px #007bff等替代，否则键盘用户直接失联 - 悬停/激活态别只改背景色：加
scale: 1.05微动 +transition: all 0.15s ease，但动画时长不能超过 0.2s，否则拖慢感知速度
为什么点击按钮没反应？检查这三个 JS 绑定盲区
按钮 HTML 写得再漂亮，JS 绑定错了照样白搭。最常踩的坑不是逻辑写错，而是事件监听时机、作用域和 this 指向全乱套。
常见错误现象：document.getElementById('next').onclick = goToNext 在 DOM 加载前执行，结果 getElementById 返回 null；或用箭头函数绑定却忘了箭头函数不绑定 this，导致内部调用 this.currentSlide 报 undefined。
- 确保 JS 执行在
DOMContentLoaded之后，或把脚本放在</body>前——别信“defer 就万事大吉”，某些 CMS 会动态插入节点 - 用
addEventListener替代onclick属性赋值，避免被后续代码覆盖；监听器函数名别用匿名函数，方便调试时removeEventListener - 如果翻页逻辑封装在对象里（比如
Slideshow类），绑定时用btn.addEventListener('click', this.goToNext.bind(this))，或改用箭头函数作为类字段（goToNext = () => { ... }）
首页/末页按钮要不要禁用？语义和可访问性比视觉更重要
视觉上灰掉「上一页」按钮很直观，但对屏幕阅读器来说，opacity: 0.5 + pointer-events: none 是无效的——它依然能被读出来、能被键盘聚焦、甚至可能被辅助技术误判为可操作。
真正合规的做法，是让禁用状态在 DOM 层面就不可交互、不可聚焦、不可被 AT 解析。
- 首页时，
prev按钮必须移除href（如果是<a>）或加disabled属性（如果是<button>），同时配aria-disabled="true" - 末页同理，
next按钮加disabled+aria-disabled="true"，并用 CSS 隐藏默认 disabled 样式（button:disabled浏览器渲染不一致） - 千万别用
display: none或visibility: hidden隐藏按钮——这会让屏幕阅读器直接跳过，用户根本不知道还有翻页功能
