在前端开发中，图片展示是一个非常常见的需求。j-gallery 是一个基于 jQuery 的图片展示插件，可以实现灵活自由的图片展示效果。本文将介绍 j-gallery 的使用教程，并提供示例代码供参考。
安装 j-gallery
j-gallery 是一个 npm 包，可以通过 npm 安装。在命令行中执行以下命令：
npm install j-gallery --save
使用 j-gallery
引入 jQuery 和 j-gallery
使用 j-gallery 首先需要引入 jQuery 和 j-gallery 的脚本文件。在 HTML 文件中添加以下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="node_modules/j-gallery/dist/jgallery.min.js"></script> <link rel="stylesheet" href="node_modules/j-gallery/dist/jgallery.min.css">
定义图片列表
使用 j-gallery 展示图片需要定义一个包含图片信息的数据列表。每个图片对象包含以下属性：
src：图片地址；thumbnail：缩略图地址；title：图片标题；description：图片描述。
可以通过以下方式定义图片列表：
-- -------------------- ---- -------
--- ------ - -
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
--初始化 j-gallery
定义图片列表后，可以通过以下方式初始化 j-gallery：
$("#gallery").jGallery({
images: images,
// 其他配置项
});其中，#gallery 是一个包含图片展示区域的元素，可以是一个 div 或者其他 HTML 元素。images 是定义的图片列表，还可以通过其他配置项设置 j-gallery 的展示效果。
j-gallery 配置项
j-gallery 支持以下配置项：
images：定义图片列表；show_albums：是否显示相册，可以为true或者false，默认为true；show_controls：是否显示控制按钮，可以为true或者false，默认为true；show_description：是否显示图片描述，可以为true或者false，默认为true；thumbnails_size：缩略图大小，可以是一个数字或者字符串，如"120px"，默认为"120px"；show_thumbnails：是否显示缩略图，可以为true或者false，默认为true；thumb_interspace：缩略图间隔，可以是一个数字或者字符串，如"10px"，默认为"10px"；transition_speed：图片切换速度，可以是一个数字或者字符串，如"500ms"，默认为"500ms"；transition_effect：图片切换效果，可以是以下值之一："slideLeft"：从右向左滑动；"slideRight"：从左向右滑动；"slideUp"：从下向上滑动；"slideDown"：从上向下滑动；"fade"：淡入淡出效果；"expand"：逐渐放大效果；"shrink"：逐渐缩小效果；
autoplay：是否开启自动播放，可以为true或者false，默认为false；autoplay_interval：自动播放间隔时间，可以是一个数字或者字符串，如"3000ms"，默认为"3000ms"；show_captions：是否显示图片标题，可以为true或者false，默认为false。
示例代码
以下是一个完整的 j-gallery 示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ---------------
------- ---------------------------------------------------------------------------------
------- -----------------------------------------------------------
----- ---------------- ----------------------------------------------------
-------
---- -
------- --
-------- --
-
-------- -
--------- ---------
------- ------
-
--------
-------
------
---- -------------------
--------
--- ------ - -
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
-
---- --------------------------------
---------- --------------------------------
------ ------ ---
------------ ----- -- - ----------- -- ----- ---
--
--
------------------------
------- -------
------------ ------
-------------- -----
----------------- -----
---------------- --------
---------------- -----
----------------- -------
----------------- --------
------------------ ------------
--------- ------
------------------ ---------
-------------- ------
---
---------
-------
-------通过以上步骤，就可以轻松使用 j-gallery 实现图片展示效果啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058ab381e8991b448ed3a2