提起轮播图，相信大家已经非常熟悉了，脑海中自然而然的会浮现出轮播图的交互效果——几张图片，可以逐一的左右切换显示，而每次只能显示一张。这是最基本的轮播图，当然，我今天要讲的不是这种。
还有一种轮播图，会同时显示三张图片，中间的图片会放大显示（相比左右两边的两张会大一些），像下面这样。
阅读原文预览
然后左右切换的时候（通过点击左右按钮或者左右滑动），左右两边的图片移动到中间位置时会动态放大，而中间的图片移动到左右两边时会动态缩小。另外，这种轮播图也可以像普通轮播图一样，无限循环。
那接下来就教大家用Axure如何实现这种轮播图，其实步骤很简单，前提是你掌握了这种思路。
1原型解析
初次接触到这个案例的时候，第一感觉就是应该可以实现，但是实现起来会非常复杂，后来经过了多次试验，终于找到了一个最优解。
我们先来分解一下这个原型的交互：
-
左右轮播的时候三个图片会顺序移动，并且中间图片动态缩小，左右图片动态放大；
-
左右轮播可以无限循环。
其实如果单独考虑第一个问题，很容易解决；如果单独考虑第二个问题，也很容易解决；可两个问题结合起来一起考虑，就需要消耗一些脑细胞了。不知道各位看到这里的时候有没有什么思路。
2设计思路
对于上面两个问题，我首先考虑的是先解决第一个问题。提到轮播这个词很容易就能想到动态面板，因为网上太多的轮播教程是基于动态面板实现的。于是拿动态面板（的轮播）去套用一下这个案例，发现无论如何都达不到预期效果，最终不得不放弃动态面板。
放弃使用动态面板就意味着要手动实现左右轮播的效果，通过移动图片来实现，顺便还可以设置图片尺寸，来达到图片放大缩小的效果。这个思路对于解决第一个问题貌似可行（而后来实践证明确实可行）。
以向右轮播为例，如下图：
当前能够看到的是图2，图3（放大）和图4，向右轮播之后看到是图1，图2（放大）和图3。此时无法继续向右轮播，更无法循环轮播。
那么接下就考虑如何实现持续（循环）轮播，在刚才的基础上，我们如果要继续向右轮播的话，应该是像下图这样的情况。
那么如何在向右轮播后，可以继续向右轮播呢？从上图可以看出来，需要将轮播后最右侧的图片（例中的图片5）放到最左边，这样在继续向右轮播后，才能有图片源源不断的从左边进入画面，从而形成一个循环。
那么问题来了，如何将最右侧的图片5放到最左边？首先说，采用移动位置的方式是不行的。其实我们也不必真的将图片5的位置移动到最左边，我们在轮播后（整个图片组发生了位移）只需要将整个图片组复位（位置和大小都要复位）即可，然后再替换掉每个位置上显示的图片。
图片组复位后，原来图片1的位置显示图5，图片2的位置显示图1，图片3的位置显示图2，图片4的位置显示图3，图片5的位置显示图4。
根据以上逻辑，就可以实现图片向右无限轮播，向左轮播同理。
但是，此时还有一个问题没有解决，如何替换图片？
同一图片位在轮播的过程中显示的图片是不一样的，比如图片1的位置，可能会在轮播的时候显示为图2，图3，图4，图5等等。所以，要替换显示的图片是不固定的，无法设置一个固定的图片来替换，只能动态去取。
如果动态去取，必然有一个地方需要存放这些图片，而且根据图片的轮播，存放在每个位置的图片会发生变化。根据这些线索，此时有一个神奇而强大的元件进入我的脑海中——那就是中继器。
用中继器存放图片1-图片5五个图片，并且按照1-5进行排序，当图片向右轮播时，就把中继器中最后的一个图片排到中继器的第一个位置（通过更新排序字段来实现）；相反的，如果图片向左轮播时，就把中继器中第一个位置的图片排到中继器的最后一个位置（通过更新排序字段来实现）。
至于图片的显示，则在中继器的每项加载时，第1个项目中的图片显示给图片1，第2个项目中的图片显示给图片2，以此类推，第5个项目中的图片显示给图片5。
到此为止，整个原型的设计原理就讲完了，接下来我们进行实践。
3制作过程
1）添加图片
在画布中添加5个图片（如下图排列），将中间图片的高宽尺寸设置为其他4个图片高宽尺寸的两倍。
2）编组并转换为动态面板
将五个图片进行编组，然后将图片组转换为动态面板，调整动态面板中图片组的位置，使第一个图片恰好完整超出画布的左边界。调整动态面板的宽度，使其宽度正好覆盖到第四个图片，这样第五个图片就不可见，如下图。
3）添加中继器
在画布中拖入一个中继器，删除掉其默认的矩形框、用例和数据集中的数据，并将其设置为隐藏。将中继器的数据集设置为两列，一列用于存放排序编号（本例中的sortid），一列用于存放图片（本例中的carimg）。将排序编号列依次填充5个数：1,2,3,4,5；将图片列导入5张图片。
设置中继器的“载入时”用例（将中继器按照sortid升序排列）和“每项加载时”用例（将中继器中的carimg依次显示到五个图片上）。
4）左右滑动图片时进行轮播
在由图片组转化成的动态面板上，设置“向左滑动时”和“向右滑动时”用例。
以向左滑动时为例，首先将图片组向左移动，
然后设置图片组中图片3的尺寸缩小及图片4的尺寸放大，
添加等待时间，
更新中继器中第一个项目的排序编号（在原来的基础上+中继器的项目数，使其可以排到最后的位置），
然后再将图片组位置复位，
图片尺寸复位。
到此向左滑动时，图片轮播效果完成，此时可以预览一下。
向右滑动时同理，不再赘述，小伙伴可自行实现。
4经验总结
这个案例是春节前一个小伙伴提出的，这段时间一直断断续续的思索着解决方案，但并未动手实践。没有实践并不是因为没有时间，而是一直没有一个完整的思路。近日得来空闲，于是打开Axure亲自动手实验一番，在尝试的过程中，却意外得来灵感，最终轻松搞定。所以说，有些事情只凭想是没有结果的，做，兴许能离目标更近一点。
（完）
原型下载地址：https://pan.baidu.com/s/1FymfFw8eZzHb0xHriNX_5w
公众号回复“021”获取百度网盘提取码
微信名：RAEDME
微信ID：raedme
❶ | 产 | 品 | 与 | 敏 | 捷 |
❷ www.raedme.cn
❸ 大鹏微信 : urmagic
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/35908/
