如何使用 HTML、CSS 和 JavaScript 在图库视图中单击预览图像？

在本文中，我们将看到使用 HTML、CSS 和一些 JavaScript 创建具有预览功能的图库是多么容易。

HTML：

• 创建一个带有类容器的 div。
• 在第一个 div 内创建另外两个 div，一个用于主视图，另一个用于带有类 main_view 和 side_view 的侧视图。
• 在主视图中插入一个 ID 为 main 的图像标签。
• 在侧视图中插入库的所有其他图像并更改函数并将图像的 src 传递给函数。

CSS：

• 为容器提供宽度和边距。
• 为 main_view 提供高度和宽度。
• 在 main_view 中设置图像的尺寸。
• 设置 side_view 以使用 flex 以适当的尺寸显示所有图像。

HTML

JavaScript：使用 change函数，我们只需将 main_view 的 src 替换为单击图像的源。

Javascript

const change = src => {
    document.getElementById('main').src = src
}

最终代码：

HTML

  

    
        /*Setting Basic Dimensions to give 
        gallary view */
        .container{
            margin: 0 auto;
            width: 90%;
        }
        .main_view{
            width: 80%;
            height: 25rem;
        }
        .main_view img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .side_view{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .side_view img{
            width: 9rem;
            height: 7rem;
            object-fit: cover;
            cursor: pointer;
            margin:0.5rem;
        }
    

  

    
    
          
        
        
            
        
  
        
        
            
            
            
            
        
    
  
    
        const change = src => {
            document.getElementById('main').src = src
        }
    

  

输出：