js实现相册

实现基础相册功能

使用HTML和CSS创建一个简单的相册布局，包含图片容器和导航按钮。HTML结构可以包含一个主容器、图片显示区域和缩略图列表。

<div class="gallery-container">
  <div class="main-image">
    <img id="current-image" src="image1.jpg" alt="Gallery Image">
  </div>
  <div class="thumbnails">
    <img src="image1-thumb.jpg" data-full="image1.jpg" class="active">
    <img src="image2-thumb.jpg" data-full="image2.jpg">
    <img src="image3-thumb.jpg" data-full="image3.jpg">
  </div>
</div>

添加JavaScript交互功能

通过事件监听实现图片切换功能。为缩略图添加点击事件，当用户点击时更换主图。

document.querySelectorAll('.thumbnails img').forEach(thumb => {
  thumb.addEventListener('click', function() {
    const mainImage = document.getElementById('current-image');
    mainImage.src = this.dataset.full;

    // 更新活动缩略图样式
    document.querySelector('.thumbnails .active').classList.remove('active');
    this.classList.add('active');
  });
});

实现图片预加载功能

优化用户体验，预先加载所有图片以避免切换时的延迟。

function preloadImages() {
  const images = [];
  document.querySelectorAll('[data-full]').forEach(img => {
    const fullImage = new Image();
    fullImage.src = img.dataset.full;
    images.push(fullImage);
  });
}
window.addEventListener('load', preloadImages);

添加过渡动画效果

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

.main-image img {
  transition: opacity 0.3s ease;
}
.main-image img.fade-out {
  opacity: 0;
}

更新JavaScript代码以应用过渡效果：

thumb.addEventListener('click', function() {
  const mainImage = document.getElementById('current-image');
  mainImage.classList.add('fade-out');

  setTimeout(() => {
    mainImage.src = this.dataset.full;
    mainImage.classList.remove('fade-out');
  }, 300);
});

实现键盘导航功能

添加键盘事件监听，允许用户使用左右箭头键浏览图片。

document.addEventListener('keydown', (e) => {
  const thumbs = document.querySelectorAll('.thumbnails img');
  const currentIndex = Array.from(thumbs).findIndex(t => t.classList.contains('active'));

  if (e.key === 'ArrowRight') {
    const nextIndex = (currentIndex + 1) % thumbs.length;
    thumbs[nextIndex].click();
  } else if (e.key === 'ArrowLeft') {
    const prevIndex = (currentIndex - 1 + thumbs.length) % thumbs.length;
    thumbs[prevIndex].click();
  }
});

响应式设计调整

确保相册在不同屏幕尺寸下都能正常显示，添加媒体查询调整布局。

@media (max-width: 768px) {
  .gallery-container {
    flex-direction: column;
  }
  .thumbnails {
    flex-direction: row;
    overflow-x: auto;
  }
}

添加图片描述功能

扩展相册功能，为每张图片添加描述文字，并在切换图片时更新。

<div class="image-description">
  <p id="current-description">第一张图片的描述</p>
</div>

更新JavaScript代码：

thumb.addEventListener('click', function() {
  const description = document.getElementById('current-description');
  description.textContent = this.dataset.description || '暂无描述';
});