html5轮播图小圆点

HTML5轮播图小圆点，也称为指示器或导航按钮，是用于显示图片轮播中当前和可选图片的标记。它们通常与JavaScript库（如Swiper、Slick、Owl Carousel等）一起使用，帮助用户在不滚动整个轮播的情况下切换图片。

在HTML5中，小圆点通常是静态的HTML元素，如`<span>`或`<button>`，每个圆点对应一个轮播图中的图像。CSS样式会被用来设置它们的样式，如颜色、大小和位置。当轮播到某个图片时，相应的小圆点会变色或突出显示，表示当前状态。

以下是一个简单的示例：

<div class="carousel">
  <img src="image1.jpg" alt="Slide 1">
  <img src="image2.jpg" alt="Slide 2">
  <img src="image3.jpg" alt="Slide 3">

  <!-- 小圆点导航 -->
  <div class="dot-navigation">
    <button class="dot active"></button>
    <button class="dot"></button>
    <button class="dot"></button>
  </div>
</div>

<style>
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
  }
  
  .active {
    background-color: red;
  }
</style>

要实现动态效果和交互，JavaScript通常会在轮播图插件的API上绑定事件，以便根据当前索引改变小圆点的状态。