当前位置：首页 > JavaScript

js实现上一张下一张

2026-04-04 08:46:28JavaScript

实现图片切换功能

在JavaScript中实现上一张和下一张图片切换功能，可以通过操作DOM元素和数组索引来完成。以下是具体实现方法：

js实现上一张下一张

基础HTML结构

<div class="image-viewer">
  <img id="current-image" src="image1.jpg">
  <button id="prev-btn">上一张</button>
  <button id="next-btn">下一张</button>
</div>

图片数组定义

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  'image4.jpg'
];
let currentIndex = 0;

上一张功能实现

document.getElementById('prev-btn').addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  document.getElementById('current-image').src = images[currentIndex];
});

下一张功能实现

document.getElementById('next-btn').addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('current-image').src = images[currentIndex];
});

边界处理优化

当到达第一张或最后一张图片时，可以禁用相应按钮：

js实现上一张下一张

function updateButtons() {
  document.getElementById('prev-btn').disabled = currentIndex === 0;
  document.getElementById('next-btn').disabled = currentIndex === images.length - 1;
}

document.getElementById('prev-btn').addEventListener('click', function() {
  if (currentIndex > 0) {
    currentIndex--;
    document.getElementById('current-image').src = images[currentIndex];
    updateButtons();
  }
});

document.getElementById('next-btn').addEventListener('click', function() {
  if (currentIndex < images.length - 1) {
    currentIndex++;
    document.getElementById('current-image').src = images[currentIndex];
    updateButtons();
  }
});

添加动画效果

可以为图片切换添加淡入淡出效果：

function changeImage(newIndex) {
  const imageElement = document.getElementById('current-image');
  imageElement.style.opacity = 0;

  setTimeout(() => {
    imageElement.src = images[newIndex];
    imageElement.style.opacity = 1;
  }, 300);

  currentIndex = newIndex;
  updateButtons();
}

键盘控制支持

添加键盘左右箭头控制：

document.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft') {
    changeImage((currentIndex - 1 + images.length) % images.length);
  } else if (e.key === 'ArrowRight') {
    changeImage((currentIndex + 1) % images.length);
  }
});

以上代码实现了一个完整的图片浏览功能，包括上一张/下一张按钮、边界处理、动画效果和键盘控制。可以根据实际需求调整样式和功能细节。