滚动图片

滚动图片是辅助组件中的一种，适用于logo展示、多场景画面展示等应用场景。

效果案例

配置

基础属性

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

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

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

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

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

组件属性

全局

排列方式：图片排列方式水平或垂直。

显示个数：如果实际数据小于此配置，则按实际数据条数显示。

图片间距：相邻图片间的距离。

图片

点击放大：开启后，预览时可点击放大。

背景：图片的背景颜色。

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

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

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

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

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

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

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

动画

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

单次滚动：滚动方式，可选择单张或单页。

1张：

1页：

点击图片居中：“单次滚动”为“1张”时，开启此配置项，预览时所点击的图片将居中显示。

轮播：

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

前进后退按钮

左右间距：按钮与组件最两端的距离。

偏移：按钮默认垂直居中，可通过偏移更改其垂直距离。

类型：可自定义配置按钮的样式。

宽度/高度：前进后退按钮的尺寸。

数据

组件数据格式

数据格式说明

静态数据-JSON数据案例

[
    {
        "id": 1,
        "url": ""
    }
]

交互

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

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

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