html轮播效果圆点怎么实现,JavaScript实现轮播图圆点选中效果（排他思想）

要实现HTML轮播效果圆点，可以使用CSS样式设置圆点的样式，并使用JavaScript控制圆点的选中状态。

首先，在HTML中创建轮播图和圆点：

<div class="slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

然后，在CSS中设置圆点的样式：

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: gray;
}
.dot.active {
  background-color: black;
}

最后，在JavaScript中实现轮播图圆点的选中效果（排他思想）：

var dots = document.querySelectorAll('.dot');
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].classList.remove('active');
  dots[currentSlide].classList.remove('active');
  slides[n].classList.add('active');
  dots[n].classList.add('active');
  currentSlide = n;
}

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', function() {
    var n = Array.prototype.indexOf.call(dots, this);
    showSlide(n);
  });
}

setInterval(function() {
  var n = currentSlide + 1;
  if (n >= slides.length) {
    n = 0;
  }
  showSlide(n);
}, 5000);

这段代码中，我们首先获取了所有的圆点和轮播图，然后定义了一个`showSlide`函数，用于显示指定的轮播图和圆点。在点击圆点时，我们使用了`Array.prototype.indexOf.call`方法获取了当前点击的圆点在数组中的下标，然后调用`showSlide`函数显示对应的轮播图和圆点。最后，我们使用`setInterval`方法定时切换轮播图，并在切换时调用`showSlide`函数。