【axure】axure制作图片轮播效果

网站或APP中经常看到图片轮播（即自动切换）效果，今天就总结一下如何用axure实现图片轮播以及点击切换效果。先睹为快，效果如下图所示，PS：新垣结衣笑起来真好看啊啊！

一、元件准备

动态面板：三种状态对应三张不同的图片；

圆形：三个小圆圈，放在图片下方位置；

矩形：小圆圈下面的背景，以使小圆圈显示更明显。

元件布局及对应关系如下图所示。

二、事件与用例

1. 选中动态面板元件，为其载入时（onload）事件添加用例：用例动作为“设置面板状态（set panel state）”为next,同时勾选“循环（wrap from last to first）”，勾选并填写“循环间隔（repeat every 4000ms,这里4000可根据自己需要修改）”，勾选“延迟第一个状态4000ms（delay first state by 4000ms）”，最后设置状态进入（animate in）和退出(animate out)动画（这里也是根据需要选择是否设置状态动画）。示意图如下所示。

设置完毕，进行预览后会发现，图片可以自动切换了，但是小圆圈并没有随着图片的变化而产生不同状态。不要着急，继续往下操作 。

2. 同时选中三个小圆圈（为了后续添加事件方便，一定要为三个小圆圈命名，这里分别命名为tag1\tag2\tag3），在属性中为其设置选项组名称（selection group）（这一步很重要哦，可保证三个小圆圈只能有一个处于选中状态），同时为每个小圆圈添加选中样式，并默认第一个小圆圈tag1处于选中状态。示意图如下所示。

3. 选中动态面板元件，为其状态改变时（onpanelstatechange）事件添加三个用例：用例1-添加判断条件面板状态等于state1，添加动作选中tag1小圆圈；继续双击事件添加用例2-添加判断条件面板状态等于state2，添加动作选中tag2小圆圈；继续双击事件添加用例3-添加判断条件面板状态等于state3，添加动作选中tag3小圆圈（由于用例3是最后一种状态，因此也可以不用添加判断条件，直接进行动作设置）。添加判断条件及添加动作示意图如下所示。

此时，进行预览后，看到随着图片的自动切换，下方小圆圈状态也跟着变化。但是此时若点击某个小圆圈，并不能跳转到对应图片。想要达到这个效果，继续进行以下设置啦！

4. 选中小圆圈tag1,为其鼠标点击（onclick）事件添加用例:添加的动作依次为设置小圆圈为选中状态、设置动态面板为state1、设置动态面板选择状态为next及勾选循环等（动态面板循环设置与1相同，请参考1）。示意图如下所示。

同理为小圆圈tag2与tag3的鼠标点击（onclick）事件添加用例，不同之处在于tag2对应的动态面板设置状态应为state2，tag3对应的动态面板设置状态应为state3。

此时进行预览，可以看到当点击不同的小圆圈时会切换至对应的图片，且点击后小圆圈会处于选中状态。之后若停止鼠标点击操作，可以看到图片仍然会自动切换，效果达成，over！

其实还可以有不同方法实现以上效果，有时间再写啦！明天又又又要上班了，加油ヾ(◍°∇°◍)ﾉﾞ！