使用 JavaScript 的照片库

Question

我正在尝试使用 html css 和 javascript 创建一个简单的照片库。 在我的项目顶部，我有 5 个缩略图，其中包含 5 个图像。 在我的缩略图下方，我有一个与原始图像大小相同的 div。 我想要发生的是当用户单击任何缩略图照片以在缩略图下方的 div 中显示照片的原始大小时。 我已经创建了项目的开始，但我不知道如何完成它。 如果有人能帮助我完成我必须添加的代码（css 和 JS），我将不胜感激。

谢谢。

HTML：

div id="img-thumbnails">
  <img src="assets/imgs/img-01.jpg">
  <img src="assets/imgs/img-02.jpg">
  <img src="assets/imgs/img-03.jpg">
  <img src="assets/imgs/img-04.jpg">
  <img src="assets/imgs/img-05.jpg">
</div>

 <div id="img-original">

 </div>

CSS：

#img-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#img-thumbnails img {
    width:200px;
    height:100px;
    cursor: pointer;
    margin-left:20px;
}

#img-original {
    height:500px;
    width:800px;
    border:10px solid black;
    margin:30px auto;
}

Answer 1

下面是一个示例实现，您可以将其用作解决问题的指南。

我在这里使用 div 代替图像，因为我没有链接到。

 var preview = document.getElementById('pretend_view'); var images = document.getElementById('pretend_images'); var thumbnails = document.querySelectorAll('#pretend_images > div'); thumbnails.forEach(function(elem){ elem.onclick = onClick.bind(null, elem); }); function onClick(elem, e){ clearPreview(); addToPreview(elem); } function clearPreview(){ var elem = document.querySelector('.preview'); if(elem){ elem.className = elem.className.replace('preview', ''); images.appendChild(elem); } } function addToPreview(elem){ elem.className = 'preview'; preview.appendChild(elem); }

 #pretend_images > div { display: inline-block; width:50px; height:50px; cursor: pointer; margin-left:20px; } #pretend_preview { height:200px; width:300px; border:10px solid black; margin:30px auto; } #a { background-color: black; } #b { background-color: blue; } #c { background-color: green; } #d { background-color: pink; } .preview { height:200px; width:300px; }

 <div id="pretend_images"> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> </div> <div id="pretend_view"></div>