如何允许在html中选择图像并将其可视化为主要，而其余的图片保留为缩略图?

Question

我在html中有以下代码片段:

<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="img/product-thumb-13.jpg" alt="">
</div>

<div class="product-gallery">
<img src="img/product-thumb-14.jpg" alt="">
<img src="img/product-thumb-75.jpg" alt="">
<img src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>

我想让网站的用户点击"产品图库"中的三个缩略图(14,75和76)之一。类，并允许将其可视化为主图像(如产品13)，因此尺寸较大，而其他3个则保持较小。这个过程应该适用于点击时的三个图像中的任何一个(电子商务网站中典型的产品可视化，其中一个特定的图像在点击时变大，而其他图像保持小)。我在网上寻找适用的方法，但找不到我要找的那个。

谢谢你的帮助，有一个美好的一天!

Answer 1

这可以通过为所有辅助图像添加onClick事件处理程序来更改中心图像的src属性来实现。我使用了特定的ids从DOM中选择图像。然后我们翻转图像源。

<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img id="primary-img" src="img/product-thumb-13.jpg" alt="">
</div>

<div class="product-gallery">
<img id="secondary-img" src="img/product-thumb-14.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-75.jpg" alt="">
<img id="secondary-img" src="img/product-thumb-76.jpg" alt="">
</div>
</div>
</div>
</div>

window.onload = function(e){ 
const secondaryImages = document.querySelectorAll("#secondary-img")
const primaryImage = document.getElementById("primary-img")
secondaryImages.forEach((image) => {
image.addEventListener("click", function() {
const backupSrc = primaryImage.src
primaryImage.src = image.src
image.src = backupSrc
})
})
}

编辑:修复代码错误(字符串字面值)