轮播图代码html+css+js

以下是一个简单的轮播图的HTML、CSS和JS代码示例：

HTML代码：

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
  <ul class="dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.slides li {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.6s ease-in-out;
}

.dot.active {
  background-color: #fff;
}

JS代码：

const slides = document.querySelector('.slides');
const dots = document.querySelectorAll('.dot');let currentSlide = 0;

function goToSlide(slide) {
  slides.style.transform = `translateX(-${slide * 100}%)`;
  dots.forEach(dot => dot.classList.remove('active'));
  dots[slide].classList.add('active');
}

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentSlide = index;
    goToSlide(currentSlide);
  });
});

setInterval(() => {
  currentSlide = (currentSlide + 1) % dots.length;
  goToSlide(currentSlide);
}, 3000);