单层、双层、差速、回溯……一文告诉你8种自动轮播banner怎么做
除了各种各样触发式的交互排版效果，我们在图文中展示产品时，也经常会用到无需触发的图片自动轮播效果。
而在图片自动轮播效果中，像网站banner一样一张一张左右移入移出的最为经典，也是最受欢迎的图片轮播效果。
在2021年初就给大家介绍过最为基本的自动轮播banner排版，现在在此基础上又衍生了不少类似效果，也有不少小伙伴来问是怎么制作的，今天一口气为大家介绍8种，一起来看看吧！
每一种效果下方都标注有对应的制作组件名称和编号。
第1种，最为基本的单层、普通自动轮播banner。
*素材来自DR钻戒《甜度最高的DR情侣钻戒，4月官宣必备》
组件：自动-轮播Banner
编号：10207（组件）
除了向左轮播，还有向右、向上、向下方向的，以及支持添加超链接、小程序的，这里不再一一展示，大家在「自动」-「Banner/轮播」分类中可以找到相关组件。
后面的效果展示也主要以向左轮播为例。
第2种，双层，前景层轮播背景层不动。
*素材来自FILA《邂逅维罗纳朱斯蒂花园…》
组件：零高图片
编号：10224（组件）
组件：自动-轮播Banner
编号：10207（组件）
iPaiban Pro 编辑器中没有专门对应该效果的组件，我们可以使用两个组件搭配实现。
「零高图片」组件的高度为零，又名万能背景图，可以用来做后边组件的背景。在编辑器中我们先选择插入一个「零高图片」组件上传背景图，然后再插入「自动-轮播Banner」组件上传轮播图即可。所有图片尺寸保存一致。
该效果中「零高图片」扮演静止不动的背景层。
第3种，双层，前景层不动背景层轮播。
*素材来自ARMANI《加入A|X派对，随秋冬潮流律动》
组件：自动-轮播Banner
编号：10207（组件）
组件：遮罩
编号：10829（组件）
iPaiban Pro 编辑器中同样没有专门对应该效果的组件，但也可以使用两个组件搭配实现。
「遮罩」组件的高度为零，又名万能前景图，可以用来做前边组件的前景。在编辑器中我们先选择插入「自动-轮播Banner」组件上传轮播图，然后再插入「遮罩」组件上传前景图即可。所有图片尺寸保存一致。
该效果中「遮罩」图片扮演静止不动的前景层。
第4种，双层，前景背景都轮播。
*素材来自Wantsuit绅装《春 日 乐 辑》
组件：背景轮播+前景轮播
编号：11489（组件）
背景和前景的轮播时间错开，给人一种前景层跟随背景层轮播的感觉，很有意思。该效果也专门介绍过，教程戳：《背景和前景一块轮播，是个什么效果？》
第5种，双层，前景在背景的特定区域轮播。
*素材来自法拉利中国《法拉利认证易手车金融服务》
组件：自动-轮播Banner(自定义区域)
编号：11187（组件）
同样是双层且前景层轮播背景层不动，与第2种相比，该效果的特点是可以将轮播图设置在背景层的任意区域，且轮播图尺寸无需和背景图尺寸一致。
第6种，差速轮播。
*素材来自MCM中国《下一场，MCM 首发亮相》
组件：自动-图片差速轮播(向左)
编号：11624（组件）
图片以不同速度轮播，就像后一张图片推着前一张图片移动，比普通轮播多了几分高级感，受到越来越多奢侈品品牌的青睐。
第7种，两张图片无限往返式轮播。
*素材来自百达翡丽《腕间的装饰艺术巡礼》
组件：自动-无限往返式Banner(左右)
编号：10962（组件）
两张图片来回轮播切换，比普通轮播更显干脆利落。
第8种，图片回溯后重新轮播。
组件：自动-轮播Banner(回溯)
编号：11694（组件）
这种效果较为特殊，它在轮播图尺寸的要求上不再需要图片尺寸一致，而只需图片高度一致即可，不过轮播图片数需为偶数。
从左到右每次轮播一张图，全部图片轮播结束后，图片快速回到最左边，然后继续从左向右依次轮播。快速回溯的效果很有动感。
以上8种效果选择对应组件后在制作时大同小异，基本上都是上传素材然后调整轮播参数，我们以第8种效果为例，一起看下详细的制作教程吧。
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：自动-轮播Banner(回溯)
编号：11694（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「自动」-「Banner/轮播」分类中找到「自动-轮播Banner(回溯)」组件，或者直接搜索组件编号11694，点击选择。
第2步：上传图片素材
在页面右侧，点击「+」号上传轮播图。注意轮播图张数需要为偶数并且每张轮播图高度一致（长度可不一致）。
第3步：调整动画参数
在上传图片的下面，滑动滑杆可以分别调整每张图片停留时间、每次轮播切换时间和图片回溯用时。
点击右侧「预览草稿」可随时预览效果，根据效果进行调整。
第4步：导入公众号后台
预览效果满意后点击「同步至微信后台」就可以了。
使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器1500+组件/组合现已全部支持免费试用了。
新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）