当前位置：首页 > JavaScript

js实现相册浏览

2026-03-16 06:32:56JavaScript

实现相册浏览的JavaScript方法

创建HTML结构 在HTML中设置一个容器用于显示相册，包含图片展示区域和导航按钮。

<div class="gallery">
  <img id="currentImage" src="image1.jpg" alt="Gallery Image">
  <div class="controls">
    <button id="prevBtn">Previous</button>
    <button id="nextBtn">Next</button>
  </div>
</div>

定义图片数组 JavaScript中创建包含所有图片路径的数组。

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

实现导航功能 添加事件监听器处理前后导航按钮的点击事件。

document.getElementById('prevBtn').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  document.getElementById('currentImage').src = images[currentIndex];
});

document.getElementById('nextBtn').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('currentImage').src = images[currentIndex];
});

增强相册功能的方法

添加缩略图预览 创建缩略图列表并实现点击切换主图功能。

js实现相册浏览

const thumbnailsContainer = document.createElement('div');
thumbnailsContainer.className = 'thumbnails';

images.forEach((img, index) => {
  const thumb = document.createElement('img');
  thumb.src = img;
  thumb.addEventListener('click', () => {
    currentIndex = index;
    document.getElementById('currentImage').src = img;
  });
  thumbnailsContainer.appendChild(thumb);
});

document.querySelector('.gallery').appendChild(thumbnailsContainer);

实现自动播放 添加自动轮播功能，可配置间隔时间。

let slideInterval = setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('currentImage').src = images[currentIndex];
}, 3000);

// 鼠标悬停暂停自动播放
document.querySelector('.gallery').addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

document.querySelector('.gallery').addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    document.getElementById('currentImage').src = images[currentIndex];
  }, 3000);
});

添加过渡效果的方法

CSS过渡动画 为图片切换添加平滑的淡入淡出效果。

js实现相册浏览

.gallery img {
  transition: opacity 0.5s ease-in-out;
}

.gallery img.fade-out {
  opacity: 0;
}

JavaScript控制过渡 修改图片切换逻辑以支持过渡效果。

function changeImage(newIndex) {
  const imgElement = document.getElementById('currentImage');
  imgElement.classList.add('fade-out');

  setTimeout(() => {
    imgElement.src = images[newIndex];
    imgElement.classList.remove('fade-out');
    currentIndex = newIndex;
  }, 500);
}

响应式设计的实现

媒体查询调整布局 针对不同屏幕尺寸优化相册显示。

@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
  }

  .thumbnails {
    display: flex;
    overflow-x: auto;
  }

  .thumbnails img {
    width: 80px;
    height: 60px;
  }
}

触摸事件支持 为移动设备添加触摸滑动支持。

let touchStartX = 0;
let touchEndX = 0;

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

document.getElementById('currentImage').addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX - 50) {
    changeImage((currentIndex + 1) % images.length);
  }
  if (touchEndX > touchStartX + 50) {
    changeImage((currentIndex - 1 + images.length) % images.length);
  }
}