JavaScript Gallery插件用法介绍 _JavaScript

在本文中, 我们将学习如何使用JavaScript实现图库功能 Gallery插入。该插件轻巧且具有响应能力, 可帮助开发人员管理照片 Gallery。
注意：请下载JavaScript Gallery插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

< link href ="https://www.lsbin.com/style.css" rel =" stylesheet" type =" text / css" /> < script src ="https://www.lsbin.com/app.js"> < / script>

例子：以下示例演示了使用JavaScript Gallery插件的图片库。 Gallery中的每个图像都可以轻松滑动。开发人员需要在工作文件夹中创建一个" images"文件夹, 其中存储" JPG"或" PNG"图像文件。以后可以在此文件夹中添加更多图像。
HTML

< !DOCTYPE html> < html lang = "en" > < meta charset = "utf-8" > < meta name = "viewport" content = "initial-scale=1, width=device-width" > < head > < link rel = "stylesheet" href = "https://www.lsbin.com/style.css" > < script src = "https://www.lsbin.com/app.js" type = "module" > < / script > < title > JavaScript Gallery Plugin< / title > < style > body { text-align: center; } < / style > < / head > < body > < h2 style = "color:green" > lsbin< / h2 > < b > JavaScript Gallery Plugin< / b > < template > < li > < img alt = "" loading = "lazy" > < / li > < / template > < / body > < / html >

images.js上面的HTML代码中使用了此JavaScript文件, 该文件包含所有图像名称, 如下所示。

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

输出如下：

文章图片
【JavaScript Gallery插件用法介绍】如果用户想向图库中添加更多图像, 则应添加新图像名称, 如下代码所示。例如, " gfg2.jpg"是添加到" images"文件夹和以下代码中的文件。

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

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