1. 概述
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变更 |
|---|---|---|
| 11.0 | 1.0.0 | - |
| 11.0 | 3.0.1 | 新增图片放大预览、提示和链接跳转功能 |
1.2 应用场景
当企业官网想要展示企业文化、产品和服务，电子商务平台想要展示最新商品、促销活动等场景时，希望实现动态展示图片，提升页面视觉效果和用户体验，同时希望实现点击图片进行网页链接跳转。如下图所示：
1.3 功能介绍
帆软提供「图片轮播」插件，主要用于动态展示图片。
支持左右和上下方向的轮播
支持点击图片跳转网页链接
支持自动播放，自定义持续时间和间隔
不支持 IE 浏览器，推荐使用谷歌浏览器或火狐浏览器
不支持移动端
2. 插件介绍
2.1 插件安装
点击下载插件：图片轮播插件
设计器插件安装方法请参见：设计器插件管理
服务器安装插件方法请参见：服务器插件管理
2.2 功能入口
1）普通报表
选中单元格并调整到合适大小，点击上方工具栏插入图表按钮，插入「图片轮播」。如下图所示：
2）FVS可视化看板
在 FVS 中添加表格组件。编辑表格，上方工具栏中选择插入图表，在图表类型窗口，选择「图片轮播」，如下图所示：
注：FVS，仅支持在「表格组件」中插入图片轮播使用，不支持直接在「图表组件」中使用图片轮播。
3）决策报表
在决策报表上方的图表工具栏，选择图片轮播图标，即可添加，如下图所示：
注：决策报表，支持在报表块或图表块中使用图片轮播。
2.3 属性设置
选择右侧「单元格元素>设置」栏，如下图所示：
具体说明如下表所示：
| 设置 | 说明 | |
|---|---|---|
| 基本 | 图片布局 | 图片显示的布局，包含如下类型：
|
动画类型 | 图片轮播效果方向，包括：
| |
| 显示控制按钮 | 若勾选，则显示手动控制轮播的按钮 | |
链接打开事件 | 点击轮播图片的触发链接跳转的鼠标事件，包括：
若选择无鼠标事件，则点击图片不做任何链接跳转。 | |
链接打开方式 | 点击轮播图片的触发链接跳转的打开方式，包括：
| |
| 自动播放 | 若勾选自动播放，则会启动自动轮播图片效果 支持自定义「动画持续时间（毫秒）」和「动画间隔（毫秒）」 | |
| 图片文件 | 增加图片 | 配置方式： 1）增加/修改 输入图片文件地址，输入网页链接和提示内容 点击「增加」按钮，即可将对应的信息加入到下方列表中 选择下方列表中某一行，点击「修改」按钮，即可对内容进行修改覆盖 2）删除、上移、下移 选择下方列表中某一行，点击「删除」/「上移」/「下移」按钮，即可对内容进行删除或顺序调整 配置要求： 1）图片文件 预览时展示的图片来源，支持填写磁盘文件和绝对路径
2）网页链接 鼠标点击图片时跳转的网页链接。非必填项，为空则不跳转。 3）提示内容 鼠标悬浮在图片上显示的提示内容。非必填项，为空则不提示。
|
| 数据集 | 从数据集中获取图片配置。 路径规则、配置说明均与「图片文件>编辑」中的规则一致。 | |
2.4 图片缩放预览
「分页预览」下，支持图片全屏缩放预览：
1）鼠标放在轮播图片上，图片的右上角会出现全屏图标 ，鼠标单击即可出现全屏图片预览界面。
2）在全屏图片预览界面，鼠标可以拖动图片，也可以用鼠标滑轮上下缩放图片。
3）点击全屏图片预览界面的右上角的退出图标 ，即可退出图片预览。
3. 示例
3.1 准备图片资源
点击下载并解压获取示例图片：示例轮播图片.zip
将示例图片放入工程/webroot/WEB-INF/resources文件夹中，如下图所示：
3.2 新建图表
1）新建一张普通报表
2）将单元格调整到合适大小，选中单元格。
3）点击上方工具栏插入图表按钮，插入「图片轮播」。
3.3 设置图表属性
1）选中图表所在单元格，点击「单元格元素」。
2）选择「设置」栏
「基本」：勾选显示控制按钮，其余属性默认设置
「自动播放」：勾选自动播放，其余属性默认设置
「图片文件」：点击「编辑」按钮，选择磁盘文件，分别选中示例图片，并添加对应网页链接和提示内容，如下图所示：
3.4 效果预览
保存报表，点击「分页预览」，效果如 1.2 节应用场景中所示。
注：不支持移动端。
4. 模板下载
点击下载模板：图片轮播.cpt
