css中怎样给轮播图片加小圆圈

CSS中怎么给轮播图片加小圆圈？

轮播图是现代网页中常见的元素之一，它可以用来展示多个图片或内容。而在轮播图中，我们常常需要通过小圆圈的方式来表示当前展示的图片或内容的位置。那么，怎么样才能用CSS来实现这一效果呢？

首先，在HTML中，我们需要创建一个外层容器，用来包含所有的图片，并且设置其position为relative。接着，在这个容器中，我们再创建一个内层容器，用来显示具体的图片，同时设置其position为absolute。最后，在内层容器的外层，我们创建小圆圈，并给这些小圆圈设置一个共同的class，便于我们在CSS中进行样式的设置。

具体的代码如下：

<div class="banner">
  <div class="banner-img">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
  </div>
  <ul class="dots">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

在CSS中，我们需要对小圆圈进行如下的样式设置：

.dots {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 20px;
}
.dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 8px;
  background-color: #fff;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
.dots li.active {
  opacity: 1;
}

其中，.dots li.active表示当前图片对应的小圆圈，需要设置为不透明。