当前位置：首页 > JavaScript

用js实现图片轮播

2026-04-04 09:23:25JavaScript

使用JavaScript实现图片轮播

HTML结构

创建一个基本的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>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS样式

为轮播组件添加基本样式，确保每次只显示一张图片。

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

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

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

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

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

JavaScript逻辑

实现轮播的核心功能，包括自动播放和手动导航。

document.addEventListener('DOMContentLoaded', function() {
  const slides = document.querySelector('.slides');
  const images = document.querySelectorAll('.slides img');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');

  let counter = 0;
  const size = images[0].clientWidth;

  function updateSlide() {
    slides.style.transform = `translateX(${-size * counter}px)`;
  }

  nextBtn.addEventListener('click', () => {
    if (counter >= images.length - 1) counter = -1;
    counter++;
    updateSlide();
  });

  prevBtn.addEventListener('click', () => {
    if (counter <= 0) counter = images.length;
    counter--;
    updateSlide();
  });

  // 自动轮播
  setInterval(() => {
    if (counter >= images.length - 1) counter = -1;
    counter++;
    updateSlide();
  }, 3000);
});

增强功能实现

添加指示器

在HTML中添加指示器小圆点：

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

CSS样式：

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background: white;
}

JavaScript更新：

// 创建指示器
const indicators = document.querySelector('.indicators');
images.forEach((_, index) => {
  const dot = document.createElement('div');
  dot.classList.add('indicator');
  if (index === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    counter = index;
    updateSlide();
    updateIndicators();
  });
  indicators.appendChild(dot);
});

function updateIndicators() {
  document.querySelectorAll('.indicator').forEach((dot, index) => {
    dot.classList.toggle('active', index === counter);
  });
}

// 在updateSlide()中调用updateIndicators()

响应式处理

添加窗口大小变化的监听，确保轮播适应不同屏幕尺寸：

用js实现图片轮播

window.addEventListener('resize', () => {
  const newSize = images[0].clientWidth;
  slides.style.transition = 'none';
  slides.style.transform = `translateX(${-newSize * counter}px)`;
  setTimeout(() => {
    slides.style.transition = 'transform 0.5s ease';
  });
});