第一眼就觉得好高级,霸王茶姬这个自动轮播效果怎么做?

i排版SVG编辑器

发布于:2026-08-05

摘要:

想要自动轮播展示多张图片,效果有太多太多了。


之前跟大家整理过一些,查看戳:

单层、双层、差速、回溯……一文告诉你8种自动轮播banner怎么做

啊?原来自动轮播这么有高级感了!

这4种会放大图片的自动轮播,超顺滑!

这样排版开头超吸睛!教你制作苹果6种经典动效


今天要给大家推荐的是霸王茶姬的一个同款自动轮播效果——自动视差轮播


 



*素材来自霸王茶姬出去走走,解锁「走走系列」茶特调买三赠一!

组件:自动-视差轮播(向左)

编号:12163(组件)

一屏之间的图片追着走,很显高级感,简简单单的一个排版就能有效提升内容的品质感和品牌调性。


该效果使用i排版SVG编辑器的「自动-视差轮播(向左)」组件(编号:12163)即可实现。组件支持一屏轮播图片层数有两层或三层,前面霸王茶姬的为三层,这个是两层效果:


 



*素材来自百达翡丽爱,历历在目

组件:自动-视差轮播(向左)

编号:12163(组件)

下面以霸王茶姬的排版为例,一起看一下详细教程吧。



详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

组件:自动-视差轮播(向左)

编号:12163(组件)


第1步:选择组件


登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「自动」分类中找到「自动-视差轮播(向左)」组件,或者直接在搜索框中搜索组件编号12163,点击选择。



第2步:选择轮播图层数并上传图片素材


一屏轮播图层数默认支持上传「两层」,本文霸王茶姬的示例为三层,所以先选择轮播图层数「三层」。



图片上传支持三部分:前景图、背景图和自动轮播图。所有图片尺寸需保持一致。


其中前景图和背景图可不传,本文示例中包括前景图和背景图,点击「换图」按钮依次上传即可。



点击「+」号分别批量上传每一层的自动轮播图。如下所示:



第3步:调整动画参数


依次调整每张图片停留时间、每次轮播切换时间和轮播延迟时间。



第4步:导入公众号后台


点击最右侧「预览草稿」,效果满意后点击同步至微信后台同步到自己的公众号就可以了。



使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。


如需局部导入可参《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。 

图片

● SVG交互排版👇🏻

 





iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 


图片

图片

                            
图片