JavaScript 图库插件

在本文中，我们将学习如何使用 JavaScript Gallery插件实现图片库功能。该插件非常轻巧且响应迅速，可帮助开发人员管理照片库。

注意：请在工作文件夹中下载 JavaScript Gallery插件，并将所需文件包含在 HTML 代码的 head 部分中。

示例：以下示例演示了使用 JavaScript Gallery 插件的图片库。图库中的每张图片都可以轻松滑动。开发者需要在保存“JPG”或“PNG”图像文件的工作文件夹中创建一个“images”文件夹。以后可以在此文件夹中添加更多图像。

HTML

  



  

    
    
    JavaScript Gallery Plugin
    
        body {
            text-align: center;
        }
    

  

    GeeksForGeeks
    JavaScript Gallery Plugin
    

  

images.js这个 JavaScript 文件用在上面的 HTML 代码中，它包含所有图像名称，如下所示。

export default [
  "background1.jpg",
  "background2.jpg",
  "background3.jpg",
  "geeksimage1.png",
  "geeksimage2.png",
  "geeksimage3.png",
  "gfg1.png" 
];

输出：

如果用户想向图库中添加更多图像，则应在代码中添加新的图像名称，如下所示。例如“gfg2.jpg”是添加到“images”文件夹和以下代码中的文件。

export default [
  "background1.jpg",
  "background2.jpg",
  "background3.jpg",
  "geeksimage1.png",
  "geeksimage2.png",
  "geeksimage3.png",
  "gfg1.png",
  "gfg2.jpg" 
];

输出：以下输出显示了插件的响应特性。