HTML5轮播图实现技巧与组件推荐

  

    
    
    
  
  <
  >
  

    
    
    
  

.carousel {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 20px auto;
  overflow: hidden;
}
.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.carousel-inner img.active {
  opacity: 1;
}
.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.dot {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dot.active {
  background: white;
}

const carousel = document.querySelector('.carousel');
const images = document.querySelectorAll('.carousel-inner img');
const dots = document.querySelectorAll('.carousel-dots .dot');
let currentIndex = 0;
let intervalId;
// 切换图片函数
function showImage(index) {
images.forEach(img => img.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
images[index].classList.add('active');
dots[index].classList.add('active');
currentIndex = index;
}
// 下一张
function nextImage() {
const next = (currentIndex + 1) % images.length;
showImage(next);
}
// 上一张
function prevImage() {
const prev = (currentIndex - 1 + images.length) % images.length;
showImage(prev);
}
// 点击指示点跳转
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.getAttribute('data-index'));
showImage(index);
resetInterval();
});
});
// 按钮事件
document.querySelector('.carousel-next').addEventListener('click', () => {
nextImage();
resetInterval();
});
document.querySelector('.carousel-prev').addEventListener('click', () => {
prevImage();
resetInterval();
});
// 自动播放（每3秒切换）
function startInterval() {
intervalId = setInterval(nextImage, 3000);
}
function resetInterval() {
clearInterval(intervalId);
startInterval();
}
// 鼠标悬停暂停自动播放
carousel.addEventListener('mouseenter', () => clearInterval(intervalId));
carousel.addEventListener('mouseleave', startInterval);
// 启动自动播放
startInterval();