简单js实现轮播

基础HTML结构

创建一个包含图片的容器，并添加必要的CSS样式隐藏溢出部分。

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="slide">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
</div>

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}

核心JavaScript逻辑

通过修改transform属性实现横向滑动效果，使用定时器控制自动轮播。

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function nextSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  document.querySelector('.slides').style.transform = 
    `translateX(-${currentSlide * 100}%)`;
}

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

添加导航按钮

扩展功能包含前进/后退按钮和指示器圆点。

document.querySelector('.prev').addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  updateSlider();
});

document.querySelector('.next').addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % totalSlides;
  updateSlider();
});

function updateSlider() {
  document.querySelector('.slides').style.transform = 
    `translateX(-${currentSlide * 100}%)`;

  // 更新指示器状态
  document.querySelectorAll('.dot').forEach((dot, index) => {
    dot.classList.toggle('active', index === currentSlide);
  });
}

响应式处理

添加窗口大小变化时的自适应调整。

window.addEventListener('resize', () => {
  document.querySelector('.slides').style.transform = 
    `translateX(-${currentSlide * 100}%)`;
});

完整示例整合

将所有功能整合为可复用的类形式。

class SimpleSlider {
  constructor(selector) {
    this.slider = document.querySelector(selector);
    this.slides = this.slider.querySelectorAll('.slide');
    this.currentIndex = 0;
    this.init();
  }

  init() {
    setInterval(() => this.next(), 3000);
  }

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    this.update();
  }

  update() {
    this.slider.querySelector('.slides').style.transform = 
      `translateX(-${this.currentIndex * 100}%)`;
  }
}

new SimpleSlider('.slider');