求助：如何用原生JavaScript（Vanilla JavaScript）构建简易轮播组件？

1. 基础HTML结构 #

先搭建核心DOM结构，包含轮播容器、幻灯片列表、切换按钮和指示器：

<div class="carousel">
  <div class="carousel-slides">
    <div class="slide active">幻灯片1</div>
    <div class="slide">幻灯片2</div>
    <div class="slide">幻灯片3</div>
    <div class="slide">幻灯片4</div>
  </div>
  <button class="carousel-btn prev">&lt;</button>
  <button class="carousel-btn next">&gt;</button>
  <div class="carousel-indicators">
    <button class="indicator active"></button>
    <button class="indicator"></button>
    <button class="indicator"></button>
    <button class="indicator"></button>
  </div>
</div>

2. 核心JavaScript逻辑 #

用原生JS实现轮播核心切换逻辑，包含手动切换、自动轮播和指示器同步：

// 获取DOM元素
const carouselSlides = document.querySelector('.carousel-slides');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const indicators = document.querySelectorAll('.indicator');

const slideCount = slides.length;
let currentIndex = 0;
let slideWidth = slides[0].offsetWidth;
let autoSlideInterval;

// 初始化轮播宽度（适配窗口变化）
function initSlideWidth() {
  slideWidth = slides[0].offsetWidth;
  carouselSlides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
window.addEventListener('resize', initSlideWidth);

// 切换到指定索引的幻灯片
function slideTo(index) {
  // 循环边界处理
  if (index < 0) {
    currentIndex = slideCount - 1;
  } else if (index >= slideCount) {
    currentIndex = 0;
  } else {
    currentIndex = index;
  }
  // 移动幻灯片容器
  carouselSlides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
  // 更新指示器状态
  updateIndicators();
}

// 更新指示器激活状态
function updateIndicators() {
  indicators.forEach((indicator, idx) => {
    indicator.classList.toggle('active', idx === currentIndex);
  });
}

// 绑定按钮点击事件
prevBtn.addEventListener('click', () => slideTo(currentIndex - 1));
nextBtn.addEventListener('click', () => slideTo(currentIndex + 1));

// 绑定指示器点击事件
indicators.forEach((indicator, idx) => {
  indicator.addEventListener('click', () => slideTo(idx));
});

// 自动轮播逻辑
function startAutoSlide() {
  autoSlideInterval = setInterval(() => {
    slideTo(currentIndex + 1);
  }, 3000);
}
// 鼠标悬停暂停自动轮播
carouselSlides.parentElement.addEventListener('mouseenter', () => {
  clearInterval(autoSlideInterval);
});
// 鼠标离开恢复自动轮播
carouselSlides.parentElement.addEventListener('mouseleave', startAutoSlide);

// 初始化
initSlideWidth();
startAutoSlide();

3. 基础CSS样式 #

配合JS实现平滑过渡效果，确保轮播布局正常：

.carousel {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-slides {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  font-size: 2rem;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: rgba(0,0,0,0.5);
  color: white;
  font-size: 1.5rem;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
}

.indicator.active {
  background-color: white;
}

4. 功能扩展建议 #

• 触摸滑动支持：监听touchstart、touchmove、touchend事件，计算滑动距离判断是否切换幻灯片
• 淡入淡出效果：将transform位移改为opacity控制，调整CSS过渡属性
• 动态加载幻灯片：通过JS动态创建slide元素，同步更新slideCount和指示器列表
• 自定义配置：封装轮播逻辑为函数，支持传入自动轮播间隔、循环模式、过渡时长等参数

内容的提问来源于stack exchange，提问作者Manivannan Kumar