当前位置：首页 > JavaScript

js图片轮播的实现

2026-04-03 21:47:31JavaScript

基础实现方法

HTML结构需包含轮播容器和图片列表

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

CSS设置基础样式和隐藏非活动图片

.slider {
  width: 600px;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slides img {
  width: 100%;
  flex-shrink: 0;
}

JavaScript核心逻辑

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

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

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

高级功能扩展

添加导航按钮控制

document.querySelector('.next').addEventListener('click', nextSlide);

document.querySelector('.prev').addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  slides.style.transform = `translateX(-${currentSlide * 100}%)`;
});

添加指示器

const indicators = document.querySelector('.indicators');
Array.from({length: totalSlides}).forEach((_, i) => {
  const dot = document.createElement('span');
  dot.addEventListener('click', () => {
    currentSlide = i;
    updateSlider();
  });
  indicators.appendChild(dot);
});

function updateSlider() {
  slides.style.transform = `translateX(-${currentSlide * 100}%)`;
  // 更新激活的指示器
}

响应式处理

监听窗口大小变化

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

性能优化

使用requestAnimationFrame

function smoothSlide() {
  requestAnimationFrame(() => {
    slides.style.transform = `translateX(-${currentSlide * 100}%)`;
  });
}

图片懒加载

<img data-src="image1.jpg" class="lazy">

const lazyLoad = () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach(img => {
    if(img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.classList.remove('lazy');
    }
  });
};
window.addEventListener('scroll', lazyLoad);

第三方库推荐

Swiper.js实现方案

js图片轮播的实现

import Swiper from 'swiper';
new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});