如何用css和js怎么图片自动滑动

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

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

.slider img {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slider img.active {
  display: block;
}

const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function showImage(index) {
  images.forEach((img, i) => {
    img.classList.remove('active');
  });
  images[index].classList.add('active');
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

// 初始显示第一张图片
showImage(currentIndex);

// 设置定时器，每隔3秒切换到下一张图片
setInterval(nextImage, 3000);