当前位置：首页 > JavaScript

js图片轮播的实现

2026-02-28 21:22:52JavaScript

基础轮播实现

使用HTML结构创建轮播容器和图片列表：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS样式设置基础布局：

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

.slides {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease;
}

.slides img {
  width: 600px;
  height: 100%;
  object-fit: cover;
}

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 / totalSlides}%)`;
}

setInterval(nextSlide, 3000);

添加导航控制

在HTML中添加导航按钮：

<button class="prev">Previous</button>
<button class="next">Next</button>

JavaScript扩展控制功能：

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

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

指示器实现

添加指示器HTML：

<div class="indicators"></div>

JavaScript动态生成指示器：

const indicators = document.querySelector('.indicators');
for(let i = 0; i < totalSlides; i++) {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  dot.addEventListener('click', () => {
    currentSlide = i;
    updateSlider();
  });
  indicators.appendChild(dot);
}

function updateSlider() {
  slides.style.transform = `translateX(-${currentSlide * 100 / totalSlides}%)`;
  document.querySelectorAll('.dot').forEach((dot, index) => {
    dot.classList.toggle('active', index === currentSlide);
  });
}

响应式处理

添加窗口大小变化监听：

window.addEventListener('resize', () => {
  const sliderWidth = document.querySelector('.slider').clientWidth;
  document.querySelectorAll('.slides img').forEach(img => {
    img.style.width = `${sliderWidth}px`;
  });
});

触摸支持

添加触摸事件处理：

let touchStartX = 0;
let touchEndX = 0;

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

slides.addEventListener('touchend', e => {
  touchEndX = e.changedTouches[0].screenX;
  if(touchEndX < touchStartX - 50) nextSlide();
  if(touchEndX > touchStartX + 50) {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    updateSlider();
  }
});

js图片轮播的实现