用 实现圆点指示器：结构语义清晰，CSS 通过 list-style:none、width/height 相同、border-radius:50% 绘制圆点，JS 控制 active 类切换高亮，并添加 aria-label、tabindex、role="button" 和 aria-current 提升可访问性。
用 HTML 列表标签实现图片轮播的圆点指示器，核心是用 <ul><li></ul> 结构配合 CSS 样式控制外观和交互状态，不依赖 JavaScript 也能完成基础展示，但切换高亮通常需 JS 配合。
结构：用 ul + li 搭建圆点容器
每个 <li> 代表一个轮播图对应的指示点，语义清晰、便于维护：
<ul class="carousel-dots"> <li data-index="0" aria-label="第1张图片"></li> <li data-index="1" aria-label="第2张图片"></li> <li data-index="2" aria-label="第3张图片"></li> </ul>
添加 aria-label 提升可访问性，data-index 方便 JS 快速定位当前项。
样式：把 li 变成圆点
关键在于清除默认列表样式，设置宽高、圆角、背景色，并统一布局：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
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 状态
轮播切换时，同步更新对应 <li> 的 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 触发切换。
进阶提示：适配键盘与屏幕阅读器
提升可用性的小细节：
- 给每个
<li>加tabindex="0"，支持键盘聚焦 - 用
role="button"明确语义，让屏幕阅读器识别为可操作元素 - 配合
keydown监听Enter或Space键触发切换 - 当前激活项用
aria-current="true"增强语义表达
例如：<li role="button" tabindex="0" aria-current="true">
