HTML 页面缩略图全屏展示：点击放大、滑动切换、懒加载
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
display: inline-block;
width: 100px;
height: 100px;
}
<p>.fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
overflow: hidden;
}</p>
<p>.fullscreen img {
max-width: 100%;
max-height: 100%;
}</p>
<p>.prev, .next {
position: fixed;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: white;
cursor: pointer;
z-index: 9999;
}</p>
<p>.prev {
left: 20px;
}</p>
<p>.next {
right: 20px;
}
</style></p>
</head>
<body>
<div id="gallery">
<div class="thumbnail">
<img src="thumbnail1.jpg" data-src="image1.jpg" alt="Image 1">
</div>
<div class="thumbnail">
<img src="thumbnail2.jpg" data-src="image2.jpg" alt="Image 2">
</div>
<div class="thumbnail">
<img src="thumbnail3.jpg" data-src="image3.jpg" alt="Image 3">
</div>
<!-- Add more thumbnails here -->
</div>
<script>
var thumbnails = document.querySelectorAll('.thumbnail');
var fullscreen = document.createElement('div');
var currentIndex = 0;
function showFullscreenImage(index) {
var img = document.createElement('img');
img.src = thumbnails[index].querySelector('img').dataset.src;
img.alt = thumbnails[index].querySelector('img').alt;
fullscreen.innerHTML = '';
fullscreen.appendChild(img);
document.body.appendChild(fullscreen);
document.addEventListener('keydown', closeFullscreenOnEsc);
}
function closeFullscreen() {
fullscreen.innerHTML = '';
document.body.removeChild(fullscreen);
document.removeEventListener('keydown', closeFullscreenOnEsc);
}
function closeFullscreenOnEsc(event) {
if (event.key === 'Escape') {
closeFullscreen();
}
}
function showPreviousImage() {
currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
showFullscreenImage(currentIndex);
}
function showNextImage() {
currentIndex = (currentIndex + 1) % thumbnails.length;
showFullscreenImage(currentIndex);
}
thumbnails.forEach(function(thumbnail, index) {
thumbnail.addEventListener('click', function() {
currentIndex = index;
showFullscreenImage(currentIndex);
});
});
document.addEventListener('click', function(event) {
if (event.target === fullscreen) {
closeFullscreen();
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
showPreviousImage();
} else if (event.key === 'ArrowRight') {
showNextImage();
}
});
document.addEventListener('touchstart', function(event) {
var startX = event.changedTouches[0].clientX;
document.addEventListener('touchend', function(event) {
var endX = event.changedTouches[0].clientX;
var difference = startX - endX;
if (difference > 50) {
showNextImage();
} else if (difference < -50) {
showPreviousImage();
}
}, { once: true });
});
fullscreen.addEventListener('touchstart', function(event) {
event.preventDefault();
});
fullscreen.addEventListener('touchmove', function(event) {
event.preventDefault();
});
var lazyImages = document.querySelectorAll('img[data-src]');
function lazyLoadImage(image) {
image.src = image.dataset.src;
image.removeAttribute('data-src');
}
if ('IntersectionObserver' in window) {
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
lazyLoadImage(entry.target);
lazyImageObserver.unobserve(entry.target);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
lazyImages.forEach(function(lazyImage) {
lazyLoadImage(lazyImage);
});
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qaEr 著作权归作者所有。请勿转载和采集!