轮播图片

轮播图片是辅助组件中的一种，适用于banner展示等场景。

效果案例

配置

基础属性

组件位置：包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

全局

当前值类型：可选择通过索引或id来切换当前值。

• 索引：选择索引时，可通过常量设置默认选中的当前页是第几个页面，通过表达式设置可动态切换当前页。
• 默认id：选择默认id时，可通过常量设置默认选中的当前页是哪个id对应的页面，通过表达式设置可动态切换当前页。

动画

切换效果：普通、淡入、翻转、立方、流转。（同“轮播视频流”的动画切换效果）

切换速度：单次动画的时间。

动画方向：除淡入效果，动画可选择水平动画或垂直动画。

轮播：

• 时间间隔：两次切换中间间隔的时间。
• 轮播方向：
  • 向前：水平滚动时，图片向左为前；垂直滚动时，页面向上为前；
  • 向后：水平滚动时，图片向右为后；垂直滚动时，页面向下为后。
• 移入停留：打开时，当鼠标移入组件轮播会暂停，移出后再继续。

分页器

显示位置：水平滚动时可选择分页器在组件上方或下方显示；垂直滚动时可选择分页器在组件左边或右边显示。

水平偏移/垂直偏移：分页器默认在上下左右居中，可通过偏移改变位置。

宽度/高度：分页器每个标记的尺寸；

圆角：标记圆角。

间距：标记间的距离。

默认颜色/选中颜色：标记默认颜色和选中时的颜色。

图片

填充方式：自适应、充满、拉伸充满、居中、不拉伸。

自适应（按原比例显示完整，长边适应短边按比例缩放）:

充满（原比例充满，短边适应长边按比例缩放）:

拉伸充满（拉伸填满，不管变形）:

居中（实际大小，居中）：

不拉伸（按实际大小显示，居左居上）：

图片系列：可在数据中配置轮播图片的url，若无数据也可在此映射id值，配置不同id显示相应的图片。以数据配置优先。

数据

组件数据格式

数据格式说明

静态数据-JSON数据案例

[
    {
        "id": 1,
        "url": "../lczCommon/matrix/images/default.png"
    }
]

交互

支持配置鼠标点击事件
当鼠标点击时，触发交互事件：设置大屏变量、打开超链接、设置可见、设置JS事件、设置面板状态。

支持配置鼠标移入事件
当鼠标移入时，触发交互事件：设置大屏变量、设置可见、设置JS事件、设置面板状态。

支持配置鼠标移出事件
当鼠标移出时，触发交互事件：设置大屏变量、设置可见、设置JS事件、设置面板状态。