jquery 带缩略图相册

jQuery 带缩略图相册

引言

在现代化的网站设计中，图片展示是一个非常常见的需求。而相册是图片展示的一种常见形式。为了提升用户体验，我们通常会在相册中加入缩略图，让用户可以快速预览和选择感兴趣的图片。在本文中，我们将介绍如何使用 jQuery 实现一个带缩略图的相册。

需求分析

我们的相册应具备以下功能：

1. 显示缩略图列表，点击缩略图可以切换显示大图；
2. 在大图展示时，可以左右切换图片；
3. 点击缩略图时，大图显示对应的图片；
4. 每张大图下方显示缩略图列表，方便用户选择；

基于以上需求，我们可以定义以下元素和交互：

1. 缩略图列表：展示所有缩略图，点击缩略图时触发切换大图；
2. 大图展示区：展示当前选择的大图；
3. 左右按钮：用于切换大图；
4. 缩略图下方列表：在大图展示时，显示当前大图对应的缩略图列表；

实现步骤

1. HTML 结构

首先，我们需要在 HTML 中定义相册所需的基本结构。以下是一个基本的 HTML 结构示例：

<div class="thumbnail-list">
  <img src="thumbnail1.jpg" alt="Thumbnail 1" data-large-image="large1.jpg">
  <img src="thumbnail2.jpg" alt="Thumbnail 2" data-large-image="large2.jpg">
  <img src="thumbnail3.jpg" alt="Thumbnail 3" data-large-image="large3.jpg">
  <!-- more thumbnails -->
</div>

<div class="gallery">
  <div class="large-image">
    <img src="large1.jpg" alt="Large Image 1">
  </div>
  <div class="navigation">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
  <div class="thumbnail-list">
    <img src="thumbnail1.jpg" alt="Thumbnail 1" data-large-image="large1.jpg">
    <img src="thumbnail2.jpg" alt="Thumbnail 2" data-large-image="large2.jpg">
    <img src="thumbnail3.jpg" alt="Thumbnail 3" data-large-image="large3.jpg">
    <!-- more thumbnails -->
  </div>
</div>

2. CSS 样式

为了使相册能够正常显示，我们需要添加一些 CSS 样式。以下是一个简单的 CSS 样式示例：

/* 缩略图列表样式 */
.thumbnail-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.thumbnail-list img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  cursor: pointer;
}

/* 大图展示区样式 */
.gallery {
  position: relative;
}

.large-image img {
  max-width: 100%;
  max-height: 400px;
}

/* 左右按钮样式 */
.navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prev,
.next {
  padding: 10px 20px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
}

/* 缩略图下方列表样式 */
.thumbnail-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.thumbnail-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  cursor: pointer;
}

3. jQuery 代码

最后，我们使用 jQuery 来实现相册的交互功能。以下是一个简单的 jQuery 代码示例：

$(document).ready(function() {
  // 缩略图点击事件
  $('.thumbnail-list img').click(function() {
    var largeImage = $(this).attr('data-large-image');
    $('.large-image img').attr('src', largeImage);
  });

  // 上一张按钮点击事件
  $('.prev').click(function() {
    var currentIndex = $('.thumbnail-list img').index($('.large-image img'));
    var prevIndex = currentIndex > 0 ?