在本文中, 我们将学习如何使用JavaScript实现图库功能 Gallery插入。该插件轻巧且具有响应能力, 可帮助开发人员管理照片 Gallery。
注意：请下载JavaScript Gallery插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。
<link href =" style.css" rel =" stylesheet" type =" text / css" /> <script src =" 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 = "style.css" >
< script src = "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"
];输出如下：
如果用户想向图库中添加更多图像, 则应添加新图像名称, 如下代码所示。例如, " gfg2.jpg"是添加到" images"文件夹和以下代码中的文件。
export default [
"background1.jpg" , "background2.jpg" , "background3.jpg" , "geeksimage1.png" , "geeksimage2.png" , "geeksimage3.png" , "gfg1.png" , "gfg2.jpg"
];输出如下：以下输出显示了插件的响应特性。
