效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f4f4f4;
}
.thumbnails {
display: flex;
justify-content: center;
margin: 20px;
}
.thumbnail {
width: 80px;
height: 80px;
margin: 5px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.1);
}
.thumbnail.active {
border-color: #007bff;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
flex-direction: column;
}
.modal.open {
display: flex;
}
.image-container {
max-width: 90%;
max-height: 70%;
overflow: hidden;
position: relative;
}
.display-image {
max-width: 100%;
max-height: 100%;
transition: transform 0.3s;
}
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.icon-button {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.icon-button:hover {
background-color: rgba(0, 0, 0, 0.8); /* 悬停时更深的黑色 */
transform: scale(1.1);
}
.icon-button:active {
transform: scale(0.9);
}
.icon-button:disabled {
background-color: rgba(0, 0, 0, 0.2); /* 禁用时更浅 */
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>图片预览</h1>
<!-- 缩略图 -->
<div class="thumbnails" id="thumbnailContainer">
<img src="imgs/wallhaven-kx5v57.jpg" class="thumbnail" alt="Thumbnail 1">
<img src="imgs/wallhaven-wegll6.png" class="thumbnail" alt="Thumbnail 2">
<img src="imgs/wallhaven-9m5mk1.png" class="thumbnail" alt="Thumbnail 3">
</div>
<!-- 弹窗 -->
<div class="modal" id="imageModal">
<div class="image-container">
<img src="" alt="Current Image" id="currentImage" class="display-image">
</div>
<div class="controls">
<div class="icon-button" id="zoomInBtn" title="放大"><svg t="1732241294803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7668" width="16" height="16"><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" fill="#ffffff" p-id="7669"></path></svg></div>
<div class="icon-button" id="zoomOutBtn" title="缩小"><svg t="1732241472622" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9692" width="16" height="16"><path d="M1.024 448.512h1024v128h-1024z" fill="#ffffff" p-id="9693"></path></svg></div>
<div class="icon-button" id="resetBtn" title="1:1 缩放"><svg t="1732241553547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13299" width="16" height="16"><path d="M288 149.333333v725.333334h-85.333333V250.368L136.405333 283.52 98.24 207.146667 213.930667 149.333333H288zM896 149.333333h-74.069333l-115.669334 57.834667 38.144 76.330667L810.666667 250.368V874.666667h85.333333V149.333333z m-320 170.666667h-106.666667v106.666667h106.666667v-106.666667z m0 277.333333h-106.666667v106.666667h106.666667v-106.666667z" p-id="13300" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="flipBtn" title="翻转"><svg t="1732241626557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15368" width="16" height="16"><path d="M962.074 490.554L647.271 355.638l125.831-89.881c-65.56-69.108-157.968-112.493-260.747-112.493-174.244 0-319.503 123.884-352.634 288.369l-83.949-34.777C123.56 209.825 300.628 63.32 512.355 63.32c132.973 0 252.063 58.09 334.393 149.833l115.326-82.375v359.776z m-710.47 269.773c65.556 69.108 157.973 112.488 260.752 112.488 174.918 0 320.546-124.873 352.931-290.307l83.868 35.874c-47.481 197.458-224.77 344.377-436.799 344.377-132.973 0-252.068-58.086-334.398-149.828l-115.322 82.37V535.525L377.44 670.441l-125.836 89.886z" p-id="15369" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="prevBtn" title="上一张"><svg t="1732241691822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17732" width="16" height="16"><path d="M658.29178 1003.504117l223.006914 0L398.119373 520.342595 881.298746 0 658.291782 0 175.112507 520.342595 658.29178 1003.504117z" p-id="17733" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="autoPlayBtn" title="自动播放"><svg t="1732241717970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18888" width="16" height="16"><path d="M891.161 512l-749.992 450v-900l749.992 450z" p-id="18889" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="nextBtn" title="下一张"><svg t="1732241665540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17426" width="16" height="16"><path d="M881.298746 520.342595 398.119373 0 175.112486 0 658.29178 520.342595 175.112507 1003.504117l223.006914 0L881.298746 520.342595z" p-id="17427" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="rotateClockwiseBtn" title="顺时针旋转"><svg t="1732241858925" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21128" width="16" height="16"><path d="M0 511.999147c0 282.794195 232.618279 511.999147 519.508467 511.999146a521.812464 521.812464 0 0 0 319.743468-108.543819l-89.343852-93.86651a391.679347 391.679347 0 0 1-230.399616 74.410543c-215.295641 0-389.631351-171.861047-389.63135-383.99936 0-212.05298 174.421043-383.99936 389.63135-383.99936 210.772982 0 382.292696 165.119725 389.119352 371.199381H727.294788l233.72761 255.999573 233.727611-255.999573h-156.15974C1031.678281 222.463629 801.96133 0 519.593801 0 232.703612 0 0 229.204951 0 511.999147z" fill="#ffffff" p-id="21129"></path></svg></div>
<div class="icon-button" id="rotateCounterClockwiseBtn" title="逆时针旋转"><svg t="1732241885059" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22261" width="16" height="16"><path d="M1194.664676 511.999147c0 282.794195-232.618279 511.999147-519.508468 511.999146a521.812464 521.812464 0 0 1-319.743467-108.543819l89.343851-93.86651a391.679347 391.679347 0 0 0 230.399616 74.410543c215.295641 0 389.631351-171.861047 389.631351-383.99936 0-212.05298-174.421043-383.99936-389.631351-383.99936-210.772982 0-382.292696 165.119725-389.119351 371.199381h181.418364l-233.727611 255.999573L0 499.199168h156.15974C162.986395 222.463629 392.703345 0 675.070875 0 961.961063 0 1194.664676 229.204951 1194.664676 511.999147z" fill="#ffffff" p-id="22262"></path></svg></div>
<div class="icon-button" id="closeBtn" title="关闭"><svg t="1732241912849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23389" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="23390"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#ffffff" p-id="23391"></path></svg></div>
</div>
</div>
<script>
const thumbnails = document.querySelectorAll('.thumbnail');
const modal = document.getElementById('imageModal');
const currentImage = document.getElementById('currentImage');
const zoomInBtn = document.getElementById('zoomInBtn');
const zoomOutBtn = document.getElementById('zoomOutBtn');
const resetBtn = document.getElementById('resetBtn');
const rotateClockwiseBtn = document.getElementById('rotateClockwiseBtn');
const rotateCounterClockwiseBtn = document.getElementById('rotateCounterClockwiseBtn');
const flipBtn = document.getElementById('flipBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const autoPlayBtn = document.getElementById('autoPlayBtn');
const closeBtn = document.getElementById('closeBtn');
let currentIndex = 0;
let zoom = 1;
let rotation = 0;
let flip = 1;
let autoPlayInterval;
const images = Array.from(thumbnails).map(thumbnail => thumbnail.src);
function openModal(index) {
currentIndex = index;
updateImage();
modal.classList.add('open');
}
function closeModal() {
modal.classList.remove('open');
clearInterval(autoPlayInterval);
}
function updateImage() {
currentImage.src = images[currentIndex];
currentImage.style.transform = `
scale(${zoom * flip}, ${zoom})
rotate(${rotation}deg)
`;
thumbnails.forEach((thumbnail, index) => {
thumbnail.classList.toggle('active', index === currentIndex);
});
}
function zoomIn() {
zoom += 0.1;
updateImage();
}
function zoomOut() {
zoom = Math.max(0.1, zoom - 0.1);
updateImage();
}
function resetImage() {
zoom = 1;
rotation = 0;
flip = 1;
updateImage();
}
function rotateClockwise() {
rotation += 90;
updateImage();
}
function rotateCounterClockwise() {
rotation -= 90;
updateImage();
}
function flipImage() {
flip *= -1;
updateImage();
}
function showPrevious() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
}
function showNext() {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
}
function toggleAutoPlay() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
autoPlayBtn.textContent = '▶';
} else {
autoPlayInterval = setInterval(showNext, 3000);
autoPlayBtn.textContent = '∥';
}
}
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', () => openModal(index));
});
zoomInBtn.addEventListener('click', zoomIn);
zoomOutBtn.addEventListener('click', zoomOut);
resetBtn.addEventListener('click', resetImage);
rotateClockwiseBtn.addEventListener('click', rotateClockwise);
rotateCounterClockwiseBtn.addEventListener('click', rotateCounterClockwise);
flipBtn.addEventListener('click', flipImage);
prevBtn.addEventListener('click', showPrevious);
nextBtn.addEventListener('click', showNext);
autoPlayBtn.addEventListener('click', toggleAutoPlay);
closeBtn.addEventListener('click', closeModal);
</script>
</body>
</html>