带有缩略图的相册导航特效

以下是一个带有缩略图的相册导航特效的示例代码：

HTML：

<div class="gallery">
  <div class="thumbnails">
    <a href="#" class="active"><img src="image1.jpg" alt="Image 1"></a>
    <a href="#"><img src="image2.jpg" alt="Image 2"></a>
    <a href="#"><img src="image3.jpg" alt="Image 3"></a>
    <a href="#"><img src="image4.jpg" alt="Image 4"></a>
  </div>
  <div class="main-image">
    <img src="image1.jpg" alt="Image 1">
  </div>
</div>

CSS：

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thumbnails {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.thumbnails a {
  margin: 0 10px;
}

.thumbnails a img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #fff;
  cursor: pointer;
}

.thumbnails a.active img {
  border-color: #f00;
}

.main-image {
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.main-image img.active {
  transform: scale(1.1);
}

JavaScript：

const thumbnails = document.querySelectorAll('.thumbnails a');
const mainImage = document.querySelector('.main-image img');

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('click', (e) => {
    e.preventDefault();
    const activeThumbnail = document.querySelector('.thumbnails a.active');
    activeThumbnail.classList.remove('active');
    thumbnail.classList.add('active');
    const newImageSrc = thumbnail.querySelector('img').src;
    mainImage.src = newImageSrc;
    mainImage.classList.add('active');
    setTimeout(() => {
      mainImage.classList.remove('active');
    }, 300);
  });
});

上述代码实现了一个简单的相册导航特效，其中包含了主要的 HTML、CSS 和 JavaScript 代码。该特效通过缩略图和主图之间的切换来实现，用户可以点击缩略图来查看不同的图片。缩略图上的边框颜色会随着用户的点击而变化，以表示当前选中的图片。在切换图片时，主图会以一定的动画效果进行缩放，以提高用户体验。