当前位置：首页 > JavaScript

js实现轮播图

2026-01-12 12:57:07JavaScript

基础轮播图实现

使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。

<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>

CSS样式设置滑动效果和布局

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

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

.slide {
  min-width: 100%;
}

JavaScript核心逻辑

let currentIndex = 0;
const slides = document.querySelector('.slides');
const slideItems = document.querySelectorAll('.slide');
const totalSlides = slideItems.length;

function nextSlide() {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlidePosition();
}

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

setInterval(nextSlide, 3000);

添加导航控制

扩展基础功能，增加左右箭头和圆点指示器。HTML添加控制元素：

<div class="slider-controls">
  <button class="prev-btn">&lt;</button>
  <button class="next-btn">&gt;</button>
  <div class="dots-container"></div>
</div>

JavaScript添加交互逻辑

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const dotsContainer = document.querySelector('.dots-container');

function createDots() {
  for (let i = 0; i < totalSlides; i++) {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    if (i === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToSlide(i));
    dotsContainer.appendChild(dot);
  }
}

function goToSlide(index) {
  currentIndex = index;
  updateSlidePosition();
  updateDots();
}

function updateDots() {
  const dots = document.querySelectorAll('.dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  updateSlidePosition();
  updateDots();
});

nextBtn.addEventListener('click', nextSlide);

触摸屏支持

添加触摸事件处理实现移动端滑动交互：

let touchStartX = 0;
let touchEndX = 0;

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

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

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

性能优化方案

改进实现方式提升运行效率：

使用requestAnimationFrame替代setInterval

let animationId;
let lastTime = 0;

function autoPlay(time) {
  if (!lastTime || time - lastTime >= 3000) {
    nextSlide();
    lastTime = time;
  }
  animationId = requestAnimationFrame(autoPlay);
}

function startAutoPlay() {
  animationId = requestAnimationFrame(autoPlay);
}

function stopAutoPlay() {
  cancelAnimationFrame(animationId);
}

// 鼠标悬停时暂停
slider.addEventListener('mouseenter', stopAutoPlay);
slider.addEventListener('mouseleave', startAutoPlay);

使用Intersection Observer实现懒加载

const lazyLoadObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyLoadObserver.unobserve(img);
    }
  });
});

document.querySelectorAll('.slide').forEach(img => {
  lazyLoadObserver.observe(img);
});

js实现轮播图