CSS轮播图分页指示器实现方法

.indicators {

  text-align: center;

  margin-top: 10px;

}

.indicator {

  display: inline-block;

  width: 10px;

  height: 10px;

  background-color: #ccc;

  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));

  });

});