多图循环轮播怎么做?不能再简单了!
胖友们⼤家好啊,我是三⼉
排版经常会遇到这种情况
⼀篇⽂章配了n多张图
怎么排都排得不好看...
今天三⼉来教⼤家⼏种玩法
让图⽚在推⽂中轮播展⽰!
省掉图⽚排版的繁琐步骤
效果酷炫,图⽚张数还不限
最重要的是操作很!简!单!
轮播效果展⽰
如何做网址
图⽚轮播
SVG组件ID:35
效果描述:多张图⽚⽆限循环的⾃动切换显⽰。
·
图⽚轮播-横向单⽅向切换
SVG组件ID:69
效果描述:多张图⽚⽆限循环,向左或向右轮播。
·
多图弹动轮播(横向)
SVG组件ID:92
效果描述:两图及两图以上的多图弹动式横向⾃动轮播,可设置轮播图边距、背景图或背景⾊、滚动⽅向和动画时长。·
图⽚轮播-上下左右切换
SVG组件ID:157
效果描述:图⽚依次⽆限循环地向上、下、左、右滚动轮播,图⽚数量需要是4的倍数。
·
·
图⽚⽥字分裂对边移出轮播
SVG组件ID:157
效果描述:多张图⽚⽥字分裂对边移出切换,⾃动播放,可设置顺时针或逆时针播放动画。
·
·
图⽚横向百叶窗分裂错位移出轮播
SVG组件ID:158
效果描述:多张图⽚横向百叶窗式分裂切换,⾃动播放。
·
·
·
·
横向停顿式图⽚轮播
SVG组件ID:166
效果描述:多张图⽚⽆限循环向左轮播或向右轮播,每张图完整显⽰后会停顿⼀会再继续播放,播放的快慢可以进⾏设置。
制作⽅法
01 进⼊SVG编辑器
通过135编辑器左侧⼊⼝进⼊svg编辑器
或者直接在浏览器输⼊svg编辑器⽹址进⼊:
02 添加组件
在SVG编辑器中搜索⼀款轮播组件的ID,或在『轮播』分类下查组件,将轮播组件添加到编辑区域
⿏标移动到SVG组件上,可以查看SVG的使⽤教程,也可以扫码预览SVG的具体效果
03 上传图⽚
在SVG编辑器右侧的配置区域,将需要添加轮播效果的图⽚上传⾄组件中。
在SVG编辑器右侧的配置区域,将需要添加轮播效果的图⽚上传⾄组件中。
根据轮播的效果设置开始时间、轮播⽅向、轮播快慢等参数即可。
04 同步/导出
制作好的SVG⽂章可以通过使⽤『同步』或『导出』功能,保存到平台(ps:不知道咋同步和导出的胖友,点击按钮,根据提⽰操作即可)
注意:
如使⽤导出代码功能,则需根据SVG效果的使⽤平台(135编辑器/后台),选择对应平台的代码进⾏复制,尽量不要直接粘贴代码,以免效果有误。
以上就是制作轮播图的⽅法啦
⼤家赶紧去SVG编辑器⾥上⼿试试吧!
还没学会也不要紧
这⾥有⼀个系统学习的机会!
扫码报名我们的排版训练课
get更多⾼颜值的排版技巧
从排版⼩⽩进阶SVG⽼⼿
赶快来和三⼉⼀起玩耍吧 扫描报名
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论