当前位置：首页 > JavaScript

js 轮播实现

2026-04-05 17:24:39JavaScript

纯JavaScript实现轮播

通过DOM操作和定时器实现基础轮播功能。核心原理是通过改变元素的translateX值或left值来实现滑动效果。

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;

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

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

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

CSS样式配合

需要配合CSS实现容器溢出隐藏和过渡动画效果：

js 轮播实现

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

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

.slide {
  min-width: 100%;
}

添加导航控制

实现左右箭头和指示点交互：

js 轮播实现

const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const dots = document.querySelectorAll('.dot');

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlider();
  updateDots();
});

nextBtn.addEventListener('click', nextSlide);

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentIndex = index;
    updateSlider();
    updateDots();
  });
});

function updateDots() {
  dots.forEach(dot => dot.classList.remove('active'));
  dots[currentIndex].classList.add('active');
}

触摸事件支持

添加移动端触摸支持：

let touchStartX = 0;
let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

slider.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX - 50) nextSlide();
  if (touchEndX > touchStartX + 50) prevBtn.click();
}

无限循环优化

通过克隆首尾元素实现无缝循环：

function initSlider() {
  const firstClone = slides[0].cloneNode(true);
  const lastClone = slides[slides.length - 1].cloneNode(true);

  slider.appendChild(firstClone);
  slider.insertBefore(lastClone, slides[0]);

  slider.style.transform = `translateX(-100%)`;
}

标签: js