js实现轮播图完整代码

以下是一个简单的JS实现轮播图的完整代码：

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <img src="img/slide1.jpg" alt="Slide 1">
    <img src="img/slide2.jpg" alt="Slide 2">
    <img src="img/slide3.jpg" alt="Slide 3">
  </div>
  <div class="slider-controls">
    <span class="slider-control active"></span>
    <span class="slider-control"></span>
    <span class="slider-control"></span>
  </div>
</div>

CSS代码：

.slider {
  position: relative;
}
.slider-wrapper {
  width: 100%;
  overflow: hidden;
}
.slider-wrapper img {
  width: 100%;
  display: none;
}
.slider-wrapper img.active {
  display: block;
}
.slider-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.slider-control {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}
.slider-control.active {
  background-color: #333;
}

JS代码：

// 获取轮播图容器和轮播图图片
const slider = document.querySelector('.slider');
const sliderWrapper = slider.querySelector('.slider-wrapper');
const sliderImgs = sliderWrapper.querySelectorAll('img');
// 获取轮播图控制器
const sliderControls = slider.querySelector('.slider-controls');
const sliderControlItems = sliderControls.querySelectorAll('.slider-control');

// 定义当前轮播图索引
let currentSlide = 0;

// 切换轮播图函数
function changeSlide(index) {
  // 隐藏当前轮播图
  sliderImgs[currentSlide].classList.remove('active');
  sliderControlItems[currentSlide].classList.remove('active');
  // 显示指定索引的轮播图
  sliderImgs[index].classList.add('active');
  sliderControlItems[index].classList.add('active');
  // 更新当前轮播图索引
  currentSlide = index;
}

// 定时切换轮播图
setInterval(() => {
  let nextSlide = currentSlide + 1;
  if (nextSlide >= sliderImgs.length) {
    nextSlide = 0;
  }
  changeSlide(nextSlide);
}, 3000);

// 点击控制器切换轮播图
sliderControls.addEventListener('click', (event) => {
  if (event.target.classList.contains('slider-control')) {
    const index = Array.from(sliderControlItems).indexOf(event.target);
    if (index !== currentSlide) {
      changeSlide(index);
    }
  }
});

以上代码实现了一个简单的轮播图，可根据需要进行修改和扩展。