html轮播图小圆点

HTML轮播图小圆点通常用于指示图片轮播过程中的当前位置和切换方向。它们通常是JavaScript库（如Swiper、Slick等）的一部分，也可以通过纯CSS和HTML自定义创建。小圆点通常是按钮样式，每个代表轮播的一张图片，用户点击可以跳转到对应的位置。

基本实现步骤包括：
1. HTML结构：创建若干个`<span>`或`<button>`元素，给每个小圆点一个唯一的ID。

<div class="carousel-indicators">
  <span id="dot1" class="carousel-dot"></span>
  <span id="dot2" class="carousel-dot"></span>
  <!-- ... -->
</div>

2. CSS样式：设置圆点的样式，比如颜色、大小和定位。

.carousel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent; /* 初始状态透明 */
}
.active carousel-dot {
  background-color: red; /* 当前选中状态的颜色 */
}

3. JavaScript/jQuery：通过轮播插件绑定事件，当轮播切换时更改小圆点的active状态。

$(document).ready(function() {
  var dots = $('.carousel-indicators span');
  swiper.on('slideChange', function() {
    dots.removeClass('active');
    dots.eq(swiper.clickedIndex).addClass('active');
  });
});