js实现轮播原理

轮播图的基本原理

轮播图通过动态切换显示的内容实现图片或元素的循环播放。核心原理是利用CSS隐藏非当前展示项，并通过JavaScript定时或手动触发切换逻辑。

实现步骤

HTML结构

<div class="slider">
  <div class="slides">
    <div class="slide active">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS样式

.slides {
  position: relative;
  height: 300px;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
.slide.active {
  opacity: 1;
}

JavaScript逻辑

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
}

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

// 自动轮播
setInterval(nextSlide, 3000);

关键点说明

• 使用绝对定位使所有幻灯片重叠
• 通过opacity控制显示/隐藏实现淡入淡出效果
• 模运算(%)实现循环切换
• setInterval实现自动播放
• 事件监听处理手动控制

扩展功能

• 添加指示器小圆点
• 触摸滑动支持
• 暂停自动播放的hover效果
• 响应式尺寸调整

这种实现方式兼顾了简单性和扩展性，可根据需求进一步优化动画效果或添加更多交互功能。