就是这种：

*素材来自DanielWellington《新品 | 时光见证，每分每秒》

在各种花式图片自动切换效果中，显得极不显眼，所以也没有专门给大家介绍过。

没想到的是，有的效果很酷炫，只是风靡一时，而它却持续不断地一直有小伙伴来问——有没有这种图片自动原地切换的效果啊？

当然有！

扒了扒品牌们的案例后，这才发现原来它看着简单，却被用出了各种创意效果。真的是越简单，越好用。

我们先来看下有哪些创意效果，最后会教大家如何实现。

效果1，最为常见的用法，和前面的案例一样，单纯地展示产品：

效果2，当切换图带有进度条设计，可以提醒读者切换的图片数，就像网页banner一样：

效果3，切换图加上渐变和文字设计，给人一种高级的电影画面感：

效果4，当画面有了顺序性，就可以展示事物的进程：

效果5，拼图玩法：

效果6，实现文字逐行显现：

以上效果使用 iPaiban Pro 编辑器的一个组件「自动-多图连续切换(无限循环)」（编号：11210）即可实现。

其中效果5如果像原文放在图文开头，可以使用组件「自动-多图连续切换(不循环)」（编号：11209）制作。效果6其实也可以像原文使用专门的组件「自动-逐行显示」（编号：11111）来实现（教程）。

下面以效果1为例，一起看下如何使用编辑器制作图片原地切换吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组件：自动-多图连续切换(无限循环)

编号：11210（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「自动」-「渐变切换」分类中找到「自动-多图连续切换(无限循环)」组件，或者直接在搜索框中搜索组合编号11210，点击选择。

第2步：上传图片素材

在页面右侧点击「+」号，按顺序批量上传准备好的切换图。所有图片尺寸需保持一致。上传后如果发现顺序不对，还可以上下拖动图片进行调整。

第3步：调整动画参数

根据所需效果，拖拽滑块分别调整「每张图片停留时间」和「每次轮播切换时间」。

点击最右侧「预览草稿」预览效果，根据效果可随时进行调整。

第4步：导入到公众号后台

效果满意后点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

如果不想同步或者需要局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分，通过代码导入公众号。

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。

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

● SVG 黑科技交互排版👇🏻

 

如需定制 SVG 黑科技排版，请点此查看策划、设计、定制开发流程和套餐，低至500元/篇。