CSS相册简单实现方法(功能分析及代码)

下面详细讲解 “CSS相册简单实现方法(功能分析及代码)”的完整攻略：

功能分析

首先我们需要明确需求和功能，本文实现的相册有以下功能:

点击缩略图弹出对应的大图；
可以左右切换大图；
多张大图间可相互切换；
大图浏览时，“关闭”、“左右切换”、“放大缩小”三个功能按钮；
缩略图上方支持添加文字描述。

代码实现

经过功能分析，我们按照以下步骤实现：

准备所需的 HTML 代码，包含缩略图列表和大图显示区域；
利用 CSS 对 HTML 进行样式设置，实现缩略图效果；
利用 JavaScript 实现对缩略图的点击事件处理，弹出对应的大图，实现左右切换和多张大图间的切换；
在 CSS 样式中添加功能按钮，利用 JavaScript 实现对功能按钮点击事件的处理；
给缩略图添加文字描述。

下面是具体的代码实现示例：

HTML 代码

在 HTML 代码中，我们需要准备缩略图列表和大图显示区域。缩略图列表可以按照以下方式进行设置，其中使用了 <ul> 和 <li> 标签来实现列表效果：

<ul class="thumbnail-list">
  <li>
    <img src="thumbnail-image.jpg" alt="thumbnail-image">
    <div class="description">这是图片的描述文字</div>
  </li>
  <li>
    <img src="thumbnail-image.jpg" alt="thumbnail-image">
    <div class="description">这是图片的描述文字</div>
  </li>
  <li>
    <img src="thumbnail-image.jpg" alt="thumbnail-image">
    <div class="description">这是图片的描述文字</div>
  </li>
  ...
</ul>

大图显示区域的 HTML 代码可以如下设置：

<div class="image-popup">
  <div class="prev-btn"></div>
  <div class="next-btn"></div>
  <div class="zoom-in-btn"></div>
  <div class="zoom-out-btn"></div>
  <div class="close-btn"></div>
  <img src="large-image.jpg" alt="large-image">
</div>

CSS 样式

在 CSS 样式中，我们需要对缩略图列表和大图显示区域进行样式设置。具体代码如下：

/* 缩略图样式 */
.thumbnail-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.thumbnail-list li {
  position: relative;
  flex: 0 0 calc(25% - 10px);
  margin: 0 5px 10px;
}

.thumbnail-list li img {
  width: 100%;
}

.thumbnail-list li .description {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
}

/* 大图样式 */
.image-popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-popup img {
  max-width: 100%;
  max-height: 100%;
}

.image-popup .prev-btn, .image-popup .next-btn,
.image-popup .zoom-in-btn, .image-popup .zoom-out-btn,
.image-popup .close-btn {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 50%;
  cursor: pointer;
}

.image-popup .prev-btn {
  top: 50%;
  left: 20px;
  background-image: url(left-arrow.png);
  transform: translateY(-50%);
}

.image-popup .next-btn {
  top: 50%;
  right: 20px;
  background-image: url(right-arrow.png);
  transform: translateY(-50%);
}

.image-popup .zoom-in-btn {
  top: 20px;
  right: 20px;
  background-image: url(zoom-in.png);
}

.image-popup .zoom-out-btn {
  top: 60px;
  right: 20px;
  background-image: url(zoom-out.png);
}

.image-popup .close-btn {
  top: 20px;
  left: 20px;
  background-image: url(close.png);
}

JavaScript 实现

在 JavaScript 中，我们需要对缩略图列表中的每个缩略图进行点击事件处理，弹出对应的大图，并实现左右切换和多张大图间的切换。具体代码如下：

// 获取缩略图列表和大图显示区域
var thumbnailList = document.querySelector('.thumbnail-list');
var imagePopup = document.querySelector('.image-popup');
var largeImage = imagePopup.querySelector('img');
var prevBtn = imagePopup.querySelector('.prev-btn');
var nextBtn = imagePopup.querySelector('.next-btn');
var zoomInBtn = imagePopup.querySelector('.zoom-in-btn');
var zoomOutBtn = imagePopup.querySelector('.zoom-out-btn');
var closeBtn = imagePopup.querySelector('.close-btn');

// 设置缩略图列表中每个缩略图的点击事件
thumbnailList.addEventListener('click', function(event) {
  var thumbnail = event.target.closest('li');
  if (thumbnail && thumbnail.parentElement === thumbnailList) {
    // 显示大图
    imagePopup.classList.add('show');
    // 获取点击的缩略图对应的大图路径
    var largeImageUrl = thumbnail.querySelector('img').src.replace('thumbnail-', '');
    // 切换大图
    largeImage.src = largeImageUrl;
    // 判断是否为第一个和最后一个大图
    if (thumbnail.previousElementSibling) {
      prevBtn.classList.remove('disabled');
    } else {
      prevBtn.classList.add('disabled');
    }
    if (thumbnail.nextElementSibling) {
      nextBtn.classList.remove('disabled');
    } else {
      nextBtn.classList.add('disabled');
    }
  }
});

// 实现左右切换和多张大图间的切换
prevBtn.addEventListener('click', function() {
  var currentThumbnail = thumbnailList.querySelector('li img[src="thumbnail-' + largeImage.src.split('/').pop() + '"]');
  var prevThumbnail = currentThumbnail.parentElement.previousElementSibling;
  var newImageUrl = '';
  if (prevThumbnail) {
    newImageUrl = prevThumbnail.querySelector('img').src.replace('thumbnail-', '');
    currentThumbnail.parentElement.classList.remove('active');
    prevThumbnail.classList.add('active');
    largeImage.src = newImageUrl;
    nextBtn.classList.remove('disabled');
    if (!prevThumbnail.previousElementSibling) {
      prevBtn.classList.add('disabled');
    }
  }
});

nextBtn.addEventListener('click', function() {
  var currentThumbnail = thumbnailList.querySelector('li img[src="thumbnail-' + largeImage.src.split('/').pop() + '"]');
  var nextThumbnail = currentThumbnail.parentElement.nextElementSibling;
  var newImageUrl = '';
  if (nextThumbnail) {
    newImageUrl = nextThumbnail.querySelector('img').src.replace('thumbnail-', '');
    currentThumbnail.parentElement.classList.remove('active');
    nextThumbnail.classList.add('active');
    largeImage.src = newImageUrl;
    prevBtn.classList.remove('disabled');
    if (!nextThumbnail.nextElementSibling) {
      nextBtn.classList.add('disabled');
    }
  }
});

// 实现放大缩小功能
var currentZoom = 1;
zoomInBtn.addEventListener('click', function() {
  currentZoom += 0.1;
  largeImage.style.transform = 'scale(' + currentZoom + ')';
});

zoomOutBtn.addEventListener('click', function() {
  if (currentZoom > 0.1) {
    currentZoom -= 0.1;
    largeImage.style.transform = 'scale(' + currentZoom + ')';
  }
});

// 实现关闭按钮功能
closeBtn.addEventListener('click', function() {
  imagePopup.classList.remove('show');
});

// 点击大图关闭弹窗
largeImage.addEventListener('click', function() {
  imagePopup.classList.remove('show');
});

示例说明

下面提供两个示例，一个演示如何在缩略图上添加文字描述，另一个演示如何实现多张大图间的切换。

示例一

我们在 CSS 样式中添加以下代码，实现对缩略图上方文字描述的设置：

.thumbnail-list li .description {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
}

然后在 HTML 代码中添加缩略图的文字描述，在每个缩略图的 <li> 标签中添加以下代码：

<div class="description">这是图片的描述文字</div>

这样就可以在每个缩略图上方添加文字描述了。

示例二

在 JavaScript 实现的代码中，我们使用了以下代码来实现大图切换：

prevBtn.addEventListener('click', function() {
  var currentThumbnail = thumbnailList.querySelector('li img[src="thumbnail-' + largeImage.src.split('/').pop() + '"]');
  var prevThumbnail = currentThumbnail.parentElement.previousElementSibling;
  var newImageUrl = '';
  if (prevThumbnail) {
    newImageUrl = prevThumbnail.querySelector('img').src.replace('thumbnail-', '');
    currentThumbnail.parentElement.classList.remove('active');
    prevThumbnail.classList.add('active');
    largeImage.src = newImageUrl;
    nextBtn.classList.remove('disabled');
    if (!prevThumbnail.previousElementSibling) {
      prevBtn.classList.add('disabled');
    }
  }
});

nextBtn.addEventListener('click', function() {
  var currentThumbnail = thumbnailList.querySelector('li img[src="thumbnail-' + largeImage.src.split('/').pop() + '"]');
  var nextThumbnail = currentThumbnail.parentElement.nextElementSibling;
  var newImageUrl = '';
  if (nextThumbnail) {
    newImageUrl = nextThumbnail.querySelector('img').src.replace('thumbnail-', '');
    currentThumbnail.parentElement.classList.remove('active');
    nextThumbnail.classList.add('active');
    largeImage.src = newImageUrl;
    prevBtn.classList.remove('disabled');
    if (!nextThumbnail.nextElementSibling) {
      nextBtn.classList.add('disabled');
    }
  }
});

在缩略图的列表中，我们只需要添加更多的缩略图，程序会自动判断并进行切换。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS相册简单实现方法(功能分析及代码) - Python技术站