当前位置：首页 > JavaScript

js实现图片轮播

2026-04-03 18:00:33JavaScript

js实现图片轮播

实现图片轮播的基本思路

图片轮播的核心是通过定时切换显示的图片，结合CSS动画或JavaScript动态操作DOM元素实现平滑过渡效果。以下是两种常见实现方式：

js实现图片轮播

纯JavaScript实现轮播

// 获取DOM元素
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0;
const maxSlide = slides.length - 1;

// 初始化轮播
const goToSlide = (slide) => {
  slides.forEach((s, i) => {
    s.style.transform = `translateX(${100 * (i - slide)}%)`;
  });
};

// 下一张
const nextSlide = () => {
  currentSlide = currentSlide === maxSlide ? 0 : currentSlide + 1;
  goToSlide(currentSlide);
};

// 上一张
const prevSlide = () => {
  currentSlide = currentSlide === 0 ? maxSlide : currentSlide - 1;
  goToSlide(currentSlide);
};

// 自动播放
let timer = setInterval(nextSlide, 3000);

// 鼠标悬停暂停
slider.addEventListener('mouseenter', () => clearInterval(timer));
slider.addEventListener('mouseleave', () => timer = setInterval(nextSlide, 3000));

// 按钮事件
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

// 初始化
goToSlide(0);

CSS样式配合

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.5);
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 20px; }
.next { right: 20px; }

使用Swiper.js库实现

对于更复杂的需求，可以使用专业轮播库Swiper.js：

// 安装：npm install swiper
import Swiper from 'swiper';
import 'swiper/css';

const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

HTML结构示例

<div class="slider">
  <div class="slide"><img src="image1.jpg"></div>
  <div class="slide"><img src="image2.jpg"></div>
  <div class="slide"><img src="image3.jpg"></div>
  <button class="btn prev">←</button>
  <button class="btn next">→</button>
</div>