js实现自动轮播

实现自动轮播的JavaScript方法

使用纯JavaScript实现自动轮播效果，可以通过以下方式完成。这里以水平轮播为例，假设HTML结构中包含一个轮播容器和多个轮播项。

HTML结构示例

<div class="slider-container">
  <div class="slider-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS基础样式

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

核心JavaScript代码

初始化变量

const track = document.querySelector('.slider-track');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
let interval;
const slideCount = slides.length;

自动轮播函数

function startAutoSlide(intervalTime = 3000) {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlidePosition();
  }, intervalTime);
}

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

添加暂停和继续功能

function pauseAutoSlide() {
  clearInterval(interval);
}

function resumeAutoSlide() {
  startAutoSlide();
}

初始化轮播

// 开始自动轮播
startAutoSlide();

// 可选：鼠标悬停暂停
track.addEventListener('mouseenter', pauseAutoSlide);
track.addEventListener('mouseleave', resumeAutoSlide);

无限循环优化

为了实现无缝无限循环，可以在HTML中复制第一个和最后一个slide，并在JavaScript中做相应处理：

function updateSlidePosition() {
  if (currentIndex >= slideCount - 1) {
    setTimeout(() => {
      currentIndex = 0;
      track.style.transition = 'none';
      track.style.transform = `translateX(0)`;
      setTimeout(() => {
        track.style.transition = 'transform 0.5s ease';
      }, 50);
    }, 500);
  }
  track.style.transform = `translateX(-${currentIndex * 100}%)`;
}

响应式处理

添加窗口大小改变时的重新计算：

window.addEventListener('resize', () => {
  updateSlidePosition();
});

这种方法创建了一个基本的自动轮播系统，可以根据需要添加导航按钮、指示器等功能进行扩展。核心原理是通过定时器改变translateX值来实现滑动效果，配合CSS过渡属性实现平滑动画。