如何在HTML中插入图片轮播组件_HTML轮播图CSS实现

<div class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="图片1" class="active">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

.carousel {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 50px auto;
  overflow: hidden;
  border-radius: 10px;
}
<p>.carousel-images {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}</p><p>.carousel-images img {
min-width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}</p><p>.carousel-images img.active {
opacity: 1;
position: absolute;
top: 0; left: 0;
}

const images = document.querySelectorAll('.carousel-images img');
let currentIndex = 0;
<p>function showImage(index) {
images.forEach(img => img.classList.remove('active'));
images[index].classList.add('active');
}</p><p>function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}</p><p>function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
}</p><p>document.querySelector('.next').addEventListener('click', nextImage);
document.querySelector('.prev').addEventListener('click', prevImage);</p><p>// 自动播放（可选）
setInterval(nextImage, 3000);

<div class="indicators">
  <span data-index="0" class="active"></span>
  <span data-index="1"></span>
  <span data-index="2"></span>
</div>