js中图片轮播底部小圆点轮播代码

以下是一个简单的图片轮播底部小圆点轮播的示例代码：

HTML：

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-dots"></div>
</div>

CSS：

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider-container {
  position: relative;
  width: 300%;
  left: 0;
  transition: left 0.5s ease-in-out;
}
.slider-container img {
  width: 33.333%;
  float: left;
}
.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.slider-dot {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;
}
.slider-dot.active {
  background-color: black;
}

JavaScript：

var sliderContainer = document.querySelector('.slider-container');
var sliderDots = document.querySelector('.slider-dots');
var sliderDot = document.querySelectorAll('.slider-dot');

var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 3000);

function nextSlide() {
  currentSlide = (currentSlide + 1) % sliderDot.length;
  sliderContainer.style.left = "-" + currentSlide + "00%";
  updateSliderDots();
}

function updateSliderDots() {
  for (var i = 0; i < sliderDot.length; i++) {
    sliderDot[i].classList.remove('active');
  }
  sliderDot[currentSlide].classList.add('active');
}

for (var i = 0; i < sliderDot.length; i++) {
  sliderDot[i].addEventListener('click', function() {
    currentSlide = Array.prototype.indexOf.call(sliderDots.children, this);
    sliderContainer.style.left = "-" + currentSlide + "00%";
    updateSliderDots();
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, 3000);
  });
}

这段代码实现了一个无限循环的图片轮播，并在底部添加了小圆点，点击小圆点可以切换到对应的图片。