js实现相册浏览

实现相册浏览的基本功能

使用HTML、CSS和JavaScript可以构建一个简单的相册浏览功能。以下是一个基础实现方案：

HTML结构：

<div class="gallery">
  <div class="thumbnails">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="viewer">
    <img id="main-image" src="image1.jpg">
  </div>
</div>

CSS样式：

.gallery {
  display: flex;
}
.thumbnails {
  width: 100px;
}
.thumbnails img {
  width: 100%;
  cursor: pointer;
  margin-bottom: 5px;
}
.viewer {
  flex: 1;
  padding-left: 20px;
}
#main-image {
  max-width: 100%;
  max-height: 80vh;
}

JavaScript交互：

document.querySelectorAll('.thumbnails img').forEach(thumb => {
  thumb.addEventListener('click', function() {
    document.getElementById('main-image').src = this.src;
  });
});

添加相册切换动画

为提升用户体验，可以添加图片切换时的过渡效果：

CSS修改：

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

JavaScript修改：

function changeImage(newSrc) {
  const mainImg = document.getElementById('main-image');
  mainImg.classList.add('fade-out');

  setTimeout(() => {
    mainImg.src = newSrc;
    mainImg.classList.remove('fade-out');
  }, 300);
}

document.querySelectorAll('.thumbnails img').forEach(thumb => {
  thumb.addEventListener('click', function() {
    changeImage(this.src);
  });
});

实现全屏浏览功能

扩展功能允许用户点击主图进入全屏模式：

JavaScript添加：

document.getElementById('main-image').addEventListener('click', function() {
  if (!document.fullscreenElement) {
    this.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
});

CSS添加全屏样式：

#main-image:-webkit-full-screen {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

添加键盘导航支持

允许用户使用键盘左右箭头切换图片：

JavaScript扩展：

let currentIndex = 0;
const thumbs = document.querySelectorAll('.thumbnails img');

function updateImage(index) {
  currentIndex = (index + thumbs.length) % thumbs.length;
  changeImage(thumbs[currentIndex].src);
}

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

// 初始化时设置当前选中缩略图
thumbs.forEach((thumb, index) => {
  thumb.addEventListener('click', function() {
    currentIndex = index;
    changeImage(this.src);
  });
});

响应式布局调整

确保相册在不同设备上都能良好显示：

CSS媒体查询：

@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
  }
  .thumbnails {
    width: 100%;
    display: flex;
    overflow-x: auto;
  }
  .thumbnails img {
    width: 80px;
    margin-right: 5px;
  }
  .viewer {
    padding-left: 0;
    padding-top: 20px;
  }
}

图片预加载优化

提升大图加载体验：

JavaScript预加载逻辑：

function preloadImages() {
  thumbs.forEach(thumb => {
    const img = new Image();
    img.src = thumb.src;
  });
}

// 页面加载完成后预加载
window.addEventListener('load', preloadImages);

添加图片描述支持

HTML结构扩展：

<div class="viewer">
  <img id="main-image" src="image1.jpg">
  <div id="image-description">图片1的描述文字</div>
</div>

JavaScript更新：

thumbs.forEach(thumb => {
  thumb.addEventListener('click', function() {
    changeImage(this.src);
    document.getElementById('image-description').textContent = this.alt;
  });
});

CSS样式：

#image-description {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
  color: #666;
}