当前位置：首页 > JavaScript

js 轮播实现

2026-02-01 01:03:22JavaScript

使用纯 JavaScript 实现轮播

通过操作 DOM 元素和 CSS 类名实现基础轮播效果。核心思路是通过定时切换显示不同图片，并添加过渡动画。

// 获取轮播元素
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

// 初始化轮播
function initSlider() {
  slides[0].classList.add('active');
  setInterval(nextSlide, 3000);
}

// 切换下一张
function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

// 启动轮播
initSlider();

添加过渡动画效果

通过 CSS 实现平滑的过渡效果，需配合 JavaScript 的类名切换。

js 轮播实现

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

实现导航按钮

添加前后导航按钮增强用户交互体验。

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

prevBtn.addEventListener('click', () => {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
});

nextBtn.addEventListener('click', nextSlide);

响应式轮播实现

通过监听窗口大小变化调整轮播布局。

js 轮播实现

window.addEventListener('resize', () => {
  slides.forEach(slide => {
    slide.style.width = `${slider.offsetWidth}px`;
  });
});

使用 requestAnimationFrame 优化性能

替代 setInterval 实现更流畅的动画效果。

function animateSlider() {
  requestAnimationFrame(animateSlider);
  // 动画逻辑
}

animateSlider();

触摸事件支持

添加移动端触摸支持，实现手势滑动切换。

let touchStartX = 0;
let touchEndX = 0;

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

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

function handleSwipe() {
  if (touchEndX < touchStartX) nextSlide();
  if (touchEndX > touchStartX) prevSlide();
}

标签: js