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>

照片库使用JavaScript

1 个答案: