Axure教程：用另一种方式实现轮播图交互

　　本文做者将教您用另外一种方法真现轮播图交互，enjoy~

　　轮播图的真现方法有许多，尽年夜大都的童鞋也风俗了用可谓“全能”的静态里板来真现。可是，关于一些特别的轮播图该怎样真现更好呢?

　　好比上面的示例结果：

　　正在线预览

　　那是一种具有3D结果的轮播图，多张差别尺寸的图片组开具有视好结果，面击两侧的图片图片将停止位移而且改动巨细。选中的图片初末位于中心。话没有多道，我们看看怎样不消静态里板去真现那种结果。

　　真现

　　1. 筹办三张图，如图方法设置地位及每张图的巨细

　　图一(pic1)设置

　　图两(pic2)设置

　　图三(pic3)设置

　　根据上图所示设置好图片地位及巨细后我们阐发交互行动：

　　以pic1为例，其地位有3种状况：地位1，地位2，地位3。

　　当pic1位于地位1战3时，面击pic1，pic1将挪动到地位2而且变年夜，当pic1位于地位2的时分面击没有停止交互行动。

　　同理，pic2战pic3的面击交互行动同pic1。

　　图片的位移正在三个牢固的面，图片的巨细有两个，挪动到最中心即地位2的时分最年夜，两侧巨细一样。

　　图片需求主动轮播，以是正在页里载进的时分我们能够思索触收图片的鼠标面击变乱。那样能真现图片的位移及巨细变革。

　　鼠标的单击变乱可以触收一次变乱的施行，没法真现变乱轮回施行，也便没法真现主动轮播。

　　综上我们能够思索经由过程设置变量掌握变乱的连续施行。

　　经由过程以上交互的阐发,我们能够假定初初形态下：

　　pic1正在地位1时分变量：var1=1 ;

　　pic2正在地位2时分变量：var2=2;

　　pic3正在地位3时分变量：var3=3;

　　年夜图宽度=wb

　　年夜图下度=hb

　　小图宽度=ws

　　小图下度=hs

　　pic1地位(x1,y1)

　　pic2地位(x2,y2)

　　pic3地位(x3,y3)

　　如图所示：

　　2. 鼠标面击交互设置

　　pic1鼠标单击交互设置：

　　尾先判定了pic1的地位是正在地位1借是正在地位3,(位于地位2时不消位移以是没有判定);

　　假如正在地位1的时分：

　　挪动pic1到地位2而且尺寸变年夜，pic2位于地位2，以是将会变小而且位移到地位3;因为pic3处正在地位3的地位以是只需求位移到地位1不消改动尺寸。最初标识表记标帜当前各个图片的地位即：var1=2;var2=3;var3=1。

　　假如正在地位3的时分：

　　挪动pic1到地位2，pic1尺寸变年夜，pic3变小位移到地位1，pic2位移到地位3，最初标识表记标帜当前各个图片的地位即：var1=2;var2=3;var3=1。

　　同理能够设置pic2战pic3的鼠标面击交互：

　　3. 页里载进变乱设置

　　页里载进时判定图片地位即判定三个变量值，按照差别的地位来触收各图片的鼠标单击变乱，真现图片的位移，当施行完再次触收页里载进变乱便真现了一个闭环，图片便可主动轮回轮播，而全部本型因为变量的使用使得您能够用于任何场景，最多改下变量值，从而年夜年夜加强了本型的复用性，扩大性。