当前位置：首页 > JavaScript

js实现上一张下一张

2026-01-30 17:05:48JavaScript

实现图片切换功能

通过JavaScript实现上一张和下一张图片切换功能，可以使用事件监听和数组索引控制。以下是具体实现方法：

HTML结构示例

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

JavaScript实现

// 图片数组
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

// 获取DOM元素
const currentImage = document.getElementById('current-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// 更新图片显示
function updateImage() {
  currentImage.src = images[currentIndex];
}

// 上一张按钮事件
prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  updateImage();
});

// 下一张按钮事件
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  updateImage();
});

// 初始化显示
updateImage();

添加过渡动画效果

为图片切换添加平滑的过渡效果，可以结合CSS实现：

CSS样式

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#current-image {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

.fade-out {
  opacity: 0;
}

修改JavaScript

function updateImage() {
  currentImage.classList.add('fade-out');
  setTimeout(() => {
    currentImage.src = images[currentIndex];
    currentImage.classList.remove('fade-out');
  }, 500);
}

支持键盘操作

添加键盘左右箭头控制功能：

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

无限循环处理

使用模数运算实现无限循环：

当到达最后一张时，点击下一张会回到第一张
当在第一张时，点击上一张会跳到最后一张

这种方法已经在示例代码中通过%运算符实现。

动态加载图片

如果图片需要从服务器动态加载：

async function loadImages() {
  try {
    const response = await fetch('/api/images');
    images = await response.json();
    updateImage();
  } catch (error) {
    console.error('加载图片失败:', error);
  }
}

// 初始化时调用
loadImages();

js实现上一张下一张