当前位置：首页 > JavaScript

js 实现图片切换

2026-02-02 15:33:29JavaScript

使用纯 JavaScript 实现图片切换

通过监听事件和操作 DOM 元素实现图片切换功能。以下是一个基础实现示例：

// 获取 DOM 元素
const images = document.querySelectorAll('.image-container img');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let currentIndex = 0;

// 显示当前图片
function showImage(index) {
  images.forEach((img, i) => {
    img.style.display = i === index ? 'block' : 'none';
  });
}

// 上一张图片
prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
});

// 下一张图片
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
});

// 初始化显示第一张图片
showImage(0);

添加过渡动画效果

通过 CSS 过渡属性实现平滑切换效果：

js 实现图片切换

.image-container img {
  transition: opacity 0.5s ease;
  opacity: 0;
  position: absolute;
}

.image-container img.active {
  opacity: 1;
}

更新 JavaScript 代码：

function showImage(index) {
  images.forEach(img => img.classList.remove('active'));
  images[index].classList.add('active');
}

自动轮播功能

添加定时器实现自动轮播：

js 实现图片切换

let slideInterval;

function startSlideshow() {
  slideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  }, 3000);
}

function stopSlideshow() {
  clearInterval(slideInterval);
}

// 鼠标悬停时暂停轮播
document.querySelector('.image-container').addEventListener('mouseenter', stopSlideshow);
document.querySelector('.image-container').addEventListener('mouseleave', startSlideshow);

// 初始化
showImage(0);
startSlideshow();

缩略图导航

添加缩略图点击切换功能：

const thumbnails = document.querySelectorAll('.thumbnail');

thumbnails.forEach((thumb, index) => {
  thumb.addEventListener('click', () => {
    currentIndex = index;
    showImage(currentIndex);
  });
});

function showImage(index) {
  images.forEach(img => img.classList.remove('active'));
  thumbnails.forEach(thumb => thumb.classList.remove('active'));

  images[index].classList.add('active');
  thumbnails[index].classList.add('active');
}

响应式图片切换

根据窗口大小调整图片显示：

function resizeHandler() {
  const container = document.querySelector('.image-container');
  const containerWidth = container.offsetWidth;

  images.forEach(img => {
    img.style.width = `${containerWidth}px`;
    img.style.height = 'auto';
  });
}

window.addEventListener('resize', resizeHandler);
resizeHandler();