<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片画廊</title>
<style>
.gallery-container {
display
: flex;
flex-wrap
: wrap;
gap
: 30px;
max-width
: 80%;
margin
: 0 auto;
padding
: 20px;
background
: #fff;
box-shadow
: 0 0 20px rgba(0,0,0,0.1);
border-radius
: 10px;
}
.gallery-section {
flex
: 1;
min-width
: 40%;
}
.description-section {
flex
: 1;
min-width
: 40%;
padding
: 20px;
background
: #f9f9f9;
border-radius
: 8px;
box-shadow
: inset 0 0 10px rgba(0,0,0,0.05);
}
.main-image {
width
: 100%;
border-radius
: 8px;
box-shadow
: 0 5px 15px rgba(0,0,0,0.2);
cursor: pointer;
transition
: transform 0.3s;
}
.main-image
:hover {
transform
: scale(1.01);
}
.thumbnails {
display
: flex;
justify-content
: center;
gap
: 10px;
margin-top
: 15px;
overflow-x
: auto;
padding
: 10px 0;
}
.thumbnail {
width
: 70px;
height
: 70px;
border-radius
: 5px;
cursor: pointer;
object-fit
: cover;
border
: 2px solid transparent;
transition
: all 0.3s;
opacity
: 0.7;
}
.thumbnail
:hover, .thumbnail.active {
opacity
: 1;
border-color
: #3498db;
transform
: scale(1.05);
}
/* 居中模态
框样式 - 无背景无文字 */
.modal {
display
: none;
position
: fixed;
z-index
: 1000;
top
: 0;
left
: 10%;
width
: 100%;
height
: 100%;
background-color
: rgba(0,0,0,0.9);
overflow
: auto;
}
.modal-content {
position
: absolute;
top
: 50%;
left
: 50%;
transform
: translate(-50%, -50%);
max-width
: 80%;
max-height
: 80%;
object-fit
: contain;
border-radius
: 5px;
box-shadow
: 0 0 30px rgba(0,0,0,0.6);
}
/* 导航按钮样式 */
.nav-btn {
position
: fixed;
top
: 50%;
transform
: translateY(-50%);
color
: white;
font-size
: 40px;
cursor: pointer;
background
: rgba(0,0,0,0.3);
width
: 60px;
height
: 60px;
display
: flex;
justify-content
: center;
align-items
: center;
border-radius
: 50%;
z-index
: 1002;
transition
: all 0.3s;
}
.nav-btn
:hover {
background
: rgba(0,0,0,0.6);
transform
: translateY(-50%) scale(1.1);
}
.prev-btn {
left
: 20px;
}
.next-btn {
right
: 20px;
}
.close {
position
: fixed;
top
: 20px;
right
: 35px;
color
: #f1f1f1;
font-size
: 40px;
font-weight
: bold;
cursor: pointer;
transition
: 0.3s;
z-index
: 1001;
background
: rgba(0,0,0,0.3);
width
: 50px;
height
: 50px;
display
: flex;
justify-content
: center;
align-items
: center;
border-radius
: 50%;
}
.close
:hover {
color
: #bbb;
background
: rgba(0,0,0,0.6);
transform
: scale(1.1);
}
.feature-list {
padding-left
: 20px;
}
.feature-list li {
margin-bottom
: 10px;
position
: relative;
}
.feature-list li
::before {
color
: #3498db;
position
: absolute;
left
: -20px;
}
@media (max-width
: 768px) {
.gallery-container {
flex-direction
: column;
}
.thumbnails {
justify-content
: flex-start;
}
.nav-btn {
width
: 40px;
height
: 40px;
font-size
: 24px;
}
.close {
font-size
: 30px;
width
: 40px;
height
: 40px;
}
}
</style>
</head>
<body>
<div class="gallery-container">
<!-- 左侧图片画廊 -->
<div class="gallery-section">
<img id="mainImage" class="main-image" src="https
://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="自然风光主图">
<div class="thumbnails">
<img class="thumbnail active" src="https
://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="山脉风景" data-large="https
://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80">
<img class="thumbnail" src="https
://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="森林雾景" data-large="https
://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80">
<img class="thumbnail" src="https
://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="热带雨林" data-large="https
://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-4.0.3&极id=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80">
<img class="thumbnail" src="https
://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="山脉湖泊" data-large="https
://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80">
<img class="thumbnail" src="https
://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="森林河流" data-large="https
://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80">
</div>
</div>
<!-- 右侧文字描述 -->
<div class="description-section">
<div class="description-content">
<ul class="feature-list">
<li>Collapsible structure, saving transportation cost.</li>
<li>Use corrugated cardboard which is stronger than boxes and can withstand more pressure.</li>
<li>The diverse appearance and multiple colors printing options of display stands can effectively attract consumers' attention and help shape the brand image.</li>
<li>FSC certified material, environmentally friendly and recyclable.</li>
</ul>
</div>
</div>
</div>
<!-- 居中模态
框 - 无背景无文字 -->
<div id="imageModal" class="modal">
<span class="close">×</span>
<div class="prev-btn nav-btn">❮</div>
<div class="next-btn nav-btn">❯</div>
<img class="modal-content" id="expandedImage">
</div>
<script>
// 获取DOM元素
const mainImage = document.getElementById('mainImage');
const thumbnails = document.querySelectorAll('.thumbnail');
const modal = document.getElementById('imageModal');
const expandedImg = document.getElementById('expandedImage');
const closeBtn = document.querySelector('.close');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 当前选中的图片索引
let currentIndex = 0;
// 缩略图
点击事件
thumbnails.forEach((thumb, index) => {
thumb.addEventListener('click', function() {
// 更新主图
updateMainImage(this.dataset.large, this.alt);
// 更新当前索引
currentIndex = index;
// 更新激活状态
thumbnails.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
// 更新主图函数
function updateMainImage(src, alt) {
mainImage.src = src;
mainImage.alt = alt;
}
// 主图
点击事件 - 打开模态
框
mainImage.addEventListener('click', function() {
openModal(this.src, this.alt);
});
// 打开模态
框函数
function openModal(src, alt) {
modal.style.display = 'block';
expandedImg.src = src;
expandedImg.alt = alt;
document.body.style.overflow = 'hidden'; // 防止背景滚动
}
// 关闭模态
框函数
function closeModal() {
modal.style.display = 'none';
document.body.style.overflow = ''; // 恢复背景滚动
}
// 关闭按钮
点击事件
closeBtn.addEventListener('click', closeModal);
//
点击模态
框背景关闭
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
// ESC键关闭模态
框
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.style.display === 'block') {
closeModal();
}
});
// 上一张按钮
prevBtn.addEventListener('click', function(e) {
e.stopPropagation(); // 防止触发背景关闭
navigate(-1);
});
// 下一张按钮
nextBtn.addEventListener('click', function(e) {
e.stopPropagation(); // 防止触发背景关闭
navigate(1);
});
// 键盘左右键导航
document.addEventListener('keydown', function(e) {
if (modal.style.display !== 'block') return;
if (e.key === 'ArrowLeft') {
navigate(-1);
} else if (e.key === 'ArrowRight') {
navigate(1);
}
});
// 导航函数
function navigate(direction) {
currentIndex += direction;
// 循环处理
if (currentIndex < 0) {
currentIndex = thumbnails.length - 1;
} else if (currentIndex >= thumbnails.length) {
currentIndex = 0;
}
// 获取新的缩略图
const newThumb = thumbnails[currentIndex];
// 更新模态
框中的图片
expandedImg.src = newThumb.dataset.large;
expandedImg.alt = newThumb.alt;
// 更新激活状态
thumbnails.forEach(t => t.classList.remove('active'));
newThumb.classList.add('active');
// 更新主图
updateMainImage(newThumb.dataset.large, newThumb.alt);
}
// 添加触摸滑动支持
let touchStartX = 0;
expandedImg.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
expandedImg.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].clientX;
const diffX = touchStartX - touchEndX;
if (Math.abs(diffX) > 50) { // 滑动距离阈值
if (diffX > 0) {
navigate(1); // 向左滑动，下一张
} else {
navigate(-1); // 向右滑动，上一张
}
}
});
</script>
</body>
</html>
帮我给这个代码每行加上注释
在移动端开发中，存在整个屏幕点击会高亮的情况，解决办法是将其去除。
扫一扫
1410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
