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

<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="carousel-image active">
  <img src="image2.jpg" alt="Image 2" class="carousel-image">
  <img src="image3.jpg" alt="Image 3" class="carousel-image">
  <button class="carousel-btn prev"><</button>
  <button class="carousel-btn next">></button>
</div>

.carousel {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: 20px auto;
}
<p>.carousel-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
}</p><p>.carousel-image.active {
opacity: 1;
}</p><p>.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
}</p><p>.prev {
left: 10px;
}</p><p>.next {
right: 10px;
}</p>

const images = document.querySelectorAll('.carousel-image');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
<p>function showImage(index) {
images.forEach(img => img.classList.remove('active'));
images[index].classList.add('active');
}</p><p>prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
});</p><p>nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
});</p>

setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}, 3000); // 每3秒切换一次