使用css3写一个轮播图带小圆点（伪类）

以下是一个使用CSS3制作带有小圆点的简单轮播图的示例代码：

HTML:

<div class="slider">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
 
  <ul class="dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
</div>

CSS:

.slider {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 80px;
  opacity: 0;
  transition: opacity 0.5s;
}
 
.slide.active {
  opacity: 1;
}
 
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}
 
.dot.active {
  opacity: 1;
}

JavaScript (用于轮播逻辑):

document.querySelectorAll('.dot').forEach((dot, index) => {
  dot.addEventListener('click', function() {
    const activeSlide = document.querySelector('.slide.active');
    const activeDot = document.querySelector('.dot.active');
 
    const nextSlide = document.querySelectorAll('.slide')[index];
    activeSlide.classList.remove('active');
    nextSlide.classList.add('active');
 
    activeDot.classList.remove('active');
    dot.classList.add('active');
  });
});

这段代码提供了一个简单的轮播图实现，其中包括五个幻灯片和相应的小圆点。点击小圆点可以切换到相应的幻灯片。这里没有使用定时器，因此轮播图需要手动触发切换。这个例子旨在展示如何使用CSS和JavaScript创建一个基本的轮播图效果。