css 轮播图上的小圆点

CSS 轮播图中的小圆点是指标导航的一部分。它可以向用户展示当前展示的图片以及其他图片的数量。使用 CSS 实现轮播图上的小圆点非常简单，我们只需要在 HTML 代码中添加几个 span 元素并为其设置样式即可。

HTML 代码：div class="slider">
    ul class="slider-list">
    li class="slider-item">
    img src="image_1.jpg">
    /li>
    li class="slider-item">
    img src="image_2.jpg">
    /li>
    li class="slider-item">
    img src="image_3.jpg">
    /li>
    /ul>
    div class="slider-nav">
    span class="slider-dot">
    /span>
    span class="slider-dot">
    /span>
    span class="slider-dot">
    /span>
    /div>
    /div>

在 CSS 样式表中，我们需要设置 slider-dot 类的样式。我们可以使用 display:inline-block 将这些 span 元素对齐并设置宽和高。同时，我们可以添加一个 hover 效果，以在用户点击小圆点时改变其样式。

CSS 样式：.slider-nav {
    text-align: center;
}
.slider-nav .slider-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
}
.slider-nav .slider-dot:hover {
    background-color: #888;
}
    

现在我们的轮播图已经包含了小圆点了。用户可以在上面点击，以跳转至特定的图片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！