.

轮播图组件(新幻灯组件)教程

老赵发表于:2022年04月26日 15:52:45更新于:2023年05月30日 16:48:37

组件简介

轮播图组件,是为了补充 Epub360 编辑器幻灯组件的切换方式过少问题,而开发的新组件。

组件使用方法与幻灯组件大体类似。区别是:轮播图组件在原有幻灯组件的基础上,新增了多种个性化切换方式和分页符样式,并可持续更新。


功能更新:为强化多素材加载正常运行,轮播图新增“性能优化模式”,优化轮播图片过多且素材尺寸过大导致手机性能承载不了,作品自动刷新情况,勾选“性能优化模式”前需去掉循环选项,低于20张图片素材或图片尺寸非全屏可无视本项更新内容。


功能权限

专业版及其以上版本

组件教程

一、插入轮播图组件

上线:顶部栏——幻灯——轮播图,插入轮播图组件。

image.png

插入后,需在素材库弹窗中选择几张图片,作为轮播图的帧。选完后点击插入。⬇️

image.png

二、元素组件属性介绍


image.png

【滑动方向】可以设置轮播图组件切换的方向为横向或竖向

【显示方式】默认为撑满,或选择缩放以填充、缩放以适合

注:对于不同的轮播图切换方式,适合使用不同的切换效果:

如“撑满”和“缩放以填充”比较适合滑动、淡入、覆盖、3D翻转、卡片等切换效果;

“缩放以适合”比较适合coverflow、重叠20%、重叠80%、中间帧放大等效果;

【切换效果】共10种,默认为“无”。无、推移、淡入效果,和“幻灯”对应的效果类似,此处不做过多讲解。⬇️

image.png

【分页样式】共5种,默认为“动态指示点”。可以调整点的颜色,以及是否显示分页符。⬇️

image.png

【初始色与激活色】当分页样式为“动态指示点”、“进度条”、“序号”时,可以通过初始色和激活色设置调整分页符的颜色。⬇️

image.png

【自动播放、循环、可滑动】与幻灯组件的设置一致。

注1:在幻灯组件中,当同时勾选自动播放和可滑动的情况下,用户在滑动幻灯组件后,幻灯将不再能自动播放,如今轮播图组件支持这一操作了。

注2:当轮播图切换方式为“重叠80%”等可以同时显示多帧的情况时,我们可能会希望一进入页面,就让中间帧的左右都有上下帧显示,要达成这种情况可以给轮播图组件勾选“循环”。⬇️



三、轮播切换方式介绍

【覆盖】切换时,上下帧有覆盖视差的效果。⬇️

image.png

【3D翻转】切换时,会有卡牌翻转的效果。⬇️

image.png

【Coverflow】切换时,中间帧最突出,前后两帧会有横向透视的视图。⬇️

image.png

【重叠20%】切换时,中间帧最突出,前后两帧会和中间帧有20%区域的重叠。⬇️

image.png

【重叠80%】切换时,中间帧最突出,前后两帧会和中间帧有80%区域的重叠。⬇️

image.png

【中间帧放大】切换时,中间帧最突出,前后两帧不会和中间帧重叠。⬇️

image.png

【卡片】切换时,中间帧最突出,前后多帧呈扇形聚拢显示。⬇️

image.png

注1:不同切换方式的显示原理为,在编辑器的轮播图尺寸范围内⬇️(见下图),根据不同切换方式,将轮播图容器几等分,因此,当切换方式为“3D翻转”、“淡入”等只显示一张图的时候,可以使用“撑满”、“缩放以适合”、“缩放以填充”等形式。

image.png(轮播图尺寸范围示意)

但当切换方式为“重叠20%”、“重叠80%”等情况时,此时轮播图容器内会显示3张图,所以用“缩放以填充”、“撑满”等方式,图片帧则会显示不全或变形,因此,在这些切换方式下,请选择“缩放以适合”显示方式,并在编辑器内调整轮播图组件尺寸到适合的比例。⬇️

image.png

四、分页符样式

                【动态指示点】⬇️               【进度条】⬇️                 【分式】⬇️

image.png

               【缩略图】⬇️                                        【序号】⬇️       

image.png

【初始色与激活色】当分页样式为“动态指示点”、“进度条”、“序号”时,可以通过初始色和激活色设置调整分页符的颜色。⬇️

image.png

五、素材管理面板

轮播图组件的素材管理面板为九宫格式,相较于原来尽可能的缩短了帧序列的纵向屏占比。

image.png

【排序】

根据帧序列的命名,可以进行升序和降序的排列。⬇️

注:拍序仅支持字母与数字,不支持汉字排序,请派友制作素材时注意规范素材名称。

image.png

【转换精度】

和原图尺寸有关,当原图宽度小于640px时,则该“转换精度”会禁用,当原图宽度大于640px时,则可选择精度为“原图”或“640”px。⬇️ 

image.png

【插入新帧】

有两种方法:

  1. 在编辑器中双击轮播图组件,进行帧的添加;

  2. 在右侧素材管理面板,点击【+】进行帧的添加。⬇️

插入的新帧会放在素材面板的最下方。

 

【帧操作】

查看:查看当前帧的大小、格式等信息。

替换:将当前帧替换为素材库中的其他帧。

添加子元素触发器:给当前帧添加子元素触发器,当添加成功后,图标会高亮。

删除:在帧序列中删除该帧。

拖拽:拖住某帧,可以调整帧序列的顺序。

image.png

【滚动素材管理面板】

轮播图组件的素材管理面板,最多可显示9帧,超过9帧时,则需要滚动显示。⬇️ 

image.png

其他

触发器-切换到指定帧

轮播图组件,支持被“切换到指定帧”触发。⬇️ 

注:使用“切换到指定帧”触发器时,建议轮播图切换效果改为“无”。

image.png

触发器-截屏

轮播图组件,支持参与截屏。包括竖屏或横屏的播放与截屏。⬇️

注:轮播图组件选择不同切换方式时,其每帧在播放器内的显示大小是不同的。

因此,轮播图组件被截屏后的显示尺寸,和其在编辑器内的显示尺寸一致,而不是和其在播放器内显示的每帧尺寸一致,制作时请注意这点。

image.png


注意事项:


1、如轮播图内的图片数量过多导致作品自动刷新,需去掉勾选“循环”,且勾选“性能优化模式”来解决,即优化性能模式不支持滑动循环。

image.png


--------- 不了解设计的程序员不是好客服 ---------------