css初级项目中轮播图分页指示器实现

<div class="carousel">

  <div class="slides">

立即学习“前端免费学习笔记（深入）”；

    <img src="image1.jpg" class="slide active" alt="Image 1">

    <img src="image2.jpg" class="slide" alt="Image 2">

    <img src="image3.jpg" class="slide" alt="Image 3">

  </div>

  <div class="indicators">

    <span class="indicator active" data-index="0"></span>

    <span class="indicator" data-index="1"></span>

    <span class="indicator" data-index="2"></span>

  </div>

</div>

.indicators {

  text-align: center;

  margin-top: 10px;

}

.indicator {

  display: inline-block;

  width: 10px;

  height: 10px;

  background-color: #ccc;

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

  border-radius: 50%;

  margin: 0 5px;

  cursor: pointer;

}

.indicator.active {

  background-color: #333;

}

const indicators = document.querySelectorAll('.indicator');

const slides = document.querySelectorAll('.slide');

function showSlide(index) {

  slides.forEach(s => s.classList.remove('active'));

  indicators.forEach(ind => ind.classList.remove('active'));

  slides[index].classList.add('active');

  indicators[index].classList.add('active');

}

indicators.forEach(ind => {

  ind.addEventListener('click', function() {

    const index = this.getAttribute('data-index');

    showSlide(parseInt(index));

  });

});