如何使用 HTML CSS 和 JavaScript 制作图片库？

如今，电子商务网站非常流行。这种类型的画廊图像通常出现在电子商务网站或在线商店中。 在本文中，我们将使用 HTML、CSS 和 JavaScript 创建一个图片库。以下是有关如何执行此操作的两个步骤。这将有助于初学者参考本文使用 HTML、CSS 和 JavaScript 构建一些小型网站项目。

方法：通过本文，我们将创建一个图片库。该图片库将以小尺寸显示所有产品图像，并以全尺寸显示一个产品图像。一旦您单击任何小图像，它将显示该特定产品图像的完整尺寸。我们将使用 JavaScript 在此图片库中创建此功能。此外，当您单击任何全尺寸图像时，我们可以放大该特定图像。我们将使用变换优化此功能：scale(1.5);光标：放大；财产。

在代码之前，您只需在 CSS 文件中为字体导入以下代码：

@import url('
https://fonts.googleapis.com/css2?family=Yaldevi:wght@200;300;400;500;600;700&display=swap
');

下面是分步实现：

第 1 步：将以下代码添加到 index.html 文件中。

index.html

  

    
    
    
    
        How to make image Gallery Using 
        HTML CSS and Javascript?
    
  
    
    

  

    Welcome to GeeksforGeeks Courses
    Live Workshop and Online Courses!
  
    
        
            
            
            
            
        
  
        
            
        
    
  
    
        function myImageFunction(productSmallImg) {
            var productFullImg = document.getElementById("img-Box");
            productFullImg.src = productSmallImg.src;
        }
    

  

第 2 步：将以下代码添加到 style.css 文件中。

样式.css

@import url(
'https://fonts.googleapis.com/css2?family=Yaldevi:wght@200;300;400;500;600;700&display=swap');
  
* {
    margin: 0;
    padding: 0;
    font-family: 'Yaldevi', sans-serif;
}
   
h1 {
    color: green;
    font-size: 80px;
    font-weight: bold;
    text-align: center;
    padding-top: 22px;
}
   
h6 {
    color: green;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 20px;
}
   
.myProducts-gallery img{
    height: 92px;
    margin: 10px 0;
    cursor: pointer;
    display: block;
    opacity: .5;
}
   
.myProducts-gallery img:hover {
    opacity: 1;
}
   
.myProducts-gallery {
    float: left;
}
   
.myProducts {
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    position: absolute;
}
   
.image-container img {
    height: 400px;
    transition: transform 1s;
}
   
.image-container img:hover{
    transform: scale(1.5);
    cursor: zoom-in;
}
   
.image-container {
    float: right;
    padding: 10px;
}

输出：

现在，正如您在输出中看到的那样，我们使用 HTML、CSS 和 JavaScript 创建了一个电子商务网站图片库，这将帮助您创建一些小型网站项目。