js实现div轮播

JavaScript 实现 Div 轮播

基础 HTML 结构

<div class="slider-container">
  <div class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="prev-btn">Previous</button>
  <button class="next-btn">Next</button>
</div>

CSS 样式

.slider-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

JavaScript 实现逻辑

document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.slider');
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;

  function updateSlider() {
    slider.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
    updateSlider();
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
    updateSlider();
  });

  // 自动轮播
  setInterval(() => {
    currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
    updateSlider();
  }, 3000);
});

关键点说明

• 使用 flex 布局实现横向排列
• transform: translateX 控制滑动效果
• transition 属性添加动画过渡
• 按钮事件更新当前索引并重绘
• 定时器实现自动轮播

扩展功能建议

• 添加指示器小圆点
• 实现无限循环滑动
• 添加触摸事件支持
• 响应式尺寸调整

完整代码可直接复制使用，注意调整容器宽度和高度以适应实际需求。如需更复杂效果，可考虑使用 Swiper 等专业轮播库。