Axure实现3d轮播图

更新

2017.11.05：全局变量设置，逻辑优化，提高移植性，可复用性。

刚入门的产品汪们其实都比较纠结一些产品软件的使用（都是这样过来的…），比如一些基本的操作，一些效果的实现。最近好几个群里的小伙伴都在问像那种带有3d 效果的轮播图用axure能否实现呢。就像这样的效果（点击两侧图片，图片居中，轮播切换图片位置及改变大小）：点击预览

答案是肯定的。

实现原理比较简单:布局多张图片并且 两侧图片的尺寸比中间图片尺寸小，图片切换的时候改变图片大小。

axure里按照如图布局三张图片：

1.假设第一张图片名称为pic1、坐标(0,32)、尺寸（150*116），第二张图片pic2、坐标(120,0)、尺寸（300*180），第三张图片pic3、坐标(390,24) 、尺寸（150*116）

2.假设三张图片初始位置分别为1,2,3

交互分析：

1.以pic1为例，其位置有3种情况：位置1，位置2，位置3。当pic1位于位置1和3时点击pic1,pic1移动到位置2并且变大，当pic1位于位置2的时候点击不进行交互动作。

同理，pic2,pic3的点击交互动作同pic1。

2.载入时候自动轮播需要进行如下设置：

通过以上分析点击操作可以触发图片的切换动作，所以可以考虑在页面的载入时候触发点击事件，这样就实现载入自动轮播图片，需要注意的是各个图片的位置关系才能进行图片的位置交换或者大小改变。

所以我们首先设置3个全局变量：var1=3，var2=3，var3=3。

它们分别表示 pic1在位置3，pic2在位置3，pic3在位置3 。

至此我们需要在页面载入的时候判断var1==3，var2==3，var3==3，然后触发图片的点击事件。

由于初始var=3 所以页面载入将触发pic3的单击事件：

在每一轮动作执行完成后我们需要标记var1,var2,var3的值，因为3张图片的位置变化了，这样就形成了一个完整的循环。

pic2交互设置：

pic1交互设置：

如你还未理清思路，文末提供rp源文件下载供参考。