JavaScript 实现图片浏览与预览功能详解

<div id="largeImage"></div>
<ul class="thumbnail-list">
<li><a href="path/to/large-image1.jpg"><img src="path/to/thumbnail1.jpg" alt="Thumbnail 1"></a></li>
<!-- more thumbnails -->
</ul>

document.querySelectorAll('.thumbnail-list img').forEach(function(thumb){
thumb.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为即跳转到href属性指定的URL

var largeImg = document.getElementById("largeImage");

// 更改大型图像源以匹配所选小型图像对应的原始大小版本。
largeImg.src = this.parentElement.href;

// 可能的话调整“大图”容器的高度宽度以适应新加载的图像尺寸
if(largeImg.naturalWidth && largeImg.naturalHeight) {
largeImg.style.width = 'auto';
largeImg.style.height = 'auto';
largeImg.offsetHeight; /* 强制重排 */

let ratioLargeToSmall = largeImg.naturalWidth / largeImg.offsetWidth;

if(ratioLargeToSmall > 1) {
largeImg.style height = `${Math.round(largeImg.naturalHeight/ratioLargeToSmall)}px`;
largeImg.style width = "100%";
}
}
});
});