图片画廊 day2 （可复制源码）

图片画廊和幻灯片效果

在现代网页设计中，图片画廊和幻灯片效果不仅是展示内容的工具，更是提升用户体验的关键元素。本文将对之前实现的图片画廊和幻灯片效果进行优化，使其更加美观和用户友好。我们将分析哪些地方进行了修改，并解释这些修改的原因。

优化设计思路

我们的目标依然是创建一个响应式的图片画廊，用户可以通过点击图片查看更大的版本。优化将集中在以下几个方面：

改进图片布局和样式，使其更加吸引人。
增强幻灯片的视觉效果和用户体验。
增加可访问性和交互性。

1. 修改后的 HTML 结构

我们将保持 HTML 结构的基本形式，但可以考虑使用更语义化的标签。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片画廊和幻灯片</title><link rel="stylesheet" href="styles.css">
</head>
<body><main class="gallery"><figure><img class="photo" src="https://via.placeholder.com/200" alt="图片1" /><figcaption>图片1</figcaption></figure><figure><img class="photo" src="https://via.placeholder.com/201" alt="图片2" /><figcaption>图片2</figcaption></figure><figure><img class="photo" src="https://via.placeholder.com/202" alt="图片3" /><figcaption>图片3</figcaption></figure><figure><img class="photo" src="https://via.placeholder.com/203" alt="图片4" /><figcaption>图片4</figcaption></figure></main><!-- 幻灯片 --><div id="lightbox" class="lightbox" role="dialog" aria-labelledby="caption" aria-hidden="true"><button class="close" aria-label="关闭">&times;</button><img class="lightbox-content" id="lightbox-img" /><div class="caption" id="caption"></div></div><script src="script.js"></script>
</body>
</html>

修改说明：

使用 <figure> 和 <figcaption>：将每个图片和其描述包裹在 <figure> 标签中，使用 <figcaption> 显示描述。这种结构更具语义性，便于搜索引擎和屏幕阅读器理解内容。
添加可访问性属性：在幻灯片中添加 role 和 aria 属性，提升可访问性，使得使用辅助技术的用户体验更佳。

2. 修改后的 CSS 样式

我们将对 CSS 进行一些关键修改，以提升视觉效果。

body {font-family: 'Arial', sans-serif;background-color: #eaeaea;margin: 0;padding: 20px;
}.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;
}.photo {width: 100%;height: auto;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);cursor: pointer;transition: transform 0.3s, box-shadow 0.3s;
}.photo:hover {transform: scale(1.05);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}.lightbox {display: none;position: fixed;z-index: 999;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);justify-content: center;align-items: center;
}.lightbox-content {display: block;max-width: 90%;max-height: 80%;border-radius: 8px;
}.close {position: absolute;top: 20px;right: 40px;color: white;font-size: 40px;cursor: pointer;background: transparent;border: none;
}.caption {margin: auto;text-align: center;color: white;position: absolute;bottom: 20px;width: 100%;font-size: 18px;
}

修改说明：

使用 CSS Grid 布局：将画廊布局从 Flexbox 改为 CSS Grid，使得图片在不同屏幕尺寸下更加灵活地排列。
添加边框和阴影：为图片添加圆角和阴影效果，提升视觉层次感，使其更具吸引力。
调整幻灯片背景：将幻灯片的背景颜色调整为更深的黑色，以增强放大图片的对比度。
改善关闭按钮：将关闭按钮设置为透明背景，提升用户体验。

3. 修改后的 JavaScript 功能

JavaScript 部分的逻辑保持不变，但可以添加一些功能增强用户体验。

const photos = document.querySelectorAll('.photo');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const caption = document.getElementById('caption');
const closeBtn = document.querySelector('.close');photos.forEach(photo => {photo.addEventListener('click', () => {lightbox.style.display = 'flex';lightboxImg.src = photo.src;caption.innerHTML = photo.alt;lightbox.setAttribute('aria-hidden', 'false'); // 更新可访问性属性});
});closeBtn.addEventListener('click', () => {lightbox.style.display = 'none';lightbox.setAttribute('aria-hidden', 'true'); // 更新可访问性属性
});// 点击光箱外部关闭
lightbox.addEventListener('click', () => {lightbox.style.display = 'none';lightbox.setAttribute('aria-hidden', 'true'); // 更新可访问性属性
});