用 实现圆点指示器：结构语义清晰，CSS 通过 list-style:none、width/height 相同、border-radius:50% 绘制圆点，JS 控制 active 类切换高亮，并添加 aria-label、tabindex、role="button" 和 aria-current 提升可访问性。
用 HTML 列表标签实现图片轮播的圆点指示器，核心是用
结构：用 ul + li 搭建圆点容器
每个 代表一个轮播图对应的指示点，语义清晰、便于维护：
添加 aria-label 提升可访问性，data-index 方便 JS 快速定位当前项。
样式：把 li 变成圆点
关键在于清除默认列表样式，设置宽高、圆角、背景色，并统一布局：
- 用
list-style: none去掉项目符号 - 设
width和height相同（如10px），再加border-radius: 50%得到正圆 - 用
display: inline-block或flex让圆点横向排列 - 加
margin控制间距，避免粘连
示例 CSS：
.carousel-dots {
padding: 0;
margin: 12px 0;
text-align: center;
}
.carousel-dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 6px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
}
.carousel-dots li.active {
background-color: #007bff;
}
交互：JS 控制 active 状态
轮播切换时，同步更新对应 的 active 类：
- 获取所有 dot 元素：
document.querySelectorAll('.carousel-dots li') - 切换前先移除所有
active类：dots.forEach(dot => dot.classList.remove('active')) - 给当前索引的 dot 添加：
dots[currentIndex].classList.add('active')
也可用事件委托监听点击，直接跳转到指定图：监听 ul，判断 e.target 是否为 li，再读取 data-index 触发切换。
进阶提示：适配键盘与屏幕阅读器
提升可用性的小细节：
- 给每个
加tabindex="0"，支持键盘聚焦 - 用
role="button"明确语义，让屏幕阅读器识别为可操作元素 - 配合
keydown监听Enter或Space键触发切换 - 当前激活项用
aria-current="true"增强语义表达
例如：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
