Axure动态面板实现轮播图

Axure中不乏许多的高级功能，其中轮播图是我们在页面中常见的一个高级功能，轮播图的做法有很多种，但是就我个人而言认为使用动态面板做轮播简单点。今天就让我们来学习一下Axure中动态面板实现轮播图吧。

一、基础用法

1.首先老规矩我们从元件库中拖拽元件进入我们的设计区域，今天我们使用的是动态面板。

2.我们双击动态面板进入编辑状态。

3.我们点击顶部的状态区，并添加我们的状态。（这里我添加了四个，并双击命名为img1234）

4.设置后之后，我们再把图片元件拉入动态面板里，每个状态放不同你需要的图片，并调整大小。这里要注意不要推出编辑面板哦。设置好后我们就可以点击关闭退出编辑面板了。

5.我们在将下好的左右翻页图标拖拽进来。你也可以选择你喜欢的图标拖拽进来。

6.大概样式设置好后，我们就可以做交互事件了。首先我们选中我们的动态面板。找到新建交互。

7.找到动态面板中的状态改变时。

8.然后鼠标点出来，再将鼠标移到状态改变时那一行，找到右边的启用情形。

9.这时候来到我们的情形编辑。选择添加情形。

 

10.这里添加的状态意思是如果当前的面板状态==img1，然后确定。

 11.后面我们就继续添加情形。重复操作。每个情形对应每个状态图片哦。

 

12.接下来我们给翻页图标增加交互事件。

13.右边的图标也一样。

14.接下来我们去预览看看吧。

 点击左右反转图标是可以使得轮播图切换的。

二、丰富化。

我们一般看到的轮播图1.进入页面自动播放；2.会在轮播图下面有小圆点，随着图片的切换，小圆点也切换起来；3.鼠标移入到轮播图图片时暂停播放，移出时恢复播放。接下来我们实现这两个功能。

（一）进入页面自动播放。

1.我们将鼠标点击页面，也就是动态面板外。然后新建交互事件。找到页面载入时。

2.找到元件动作里的设置面板状态。

3.再分别设置目标-STATE，勾选向后循环，进入动画，点击更多选项，循环间隔勾上。

4.我们预览可以看到我们的轮播图在我们进入页面的时候就会自动播放拉。

（二）在轮播图下面添加小圆点，随着图片的切换，小圆点也切换起来，同时点击圆点也可以跳转图片。

1.我们选择圆形元件（或者你可以选择你自己喜欢的图标、元件），复制多份。有多少个状态（也就是我们有多少图片），你有几个图片就对应多少个图片嘛，或者你也可以选择四个圆点，无论多少图片，都循环回来。这里我们选择四个圆点对应四个图片比较清晰。

2.这里教大家一个小技巧，就是如何让你需要的元件水平等距并排。

我们同时选中我们需要的元件，点击菜单中的水平即可。

3.我们要给我们的圆形给个名字，方便我们查找到。建议大家有这个良好的习惯，其他元件都设置好各自的名字，特别是很多重复的元件时，更加需要设置，不然你分不清你的元件，这样就比较头疼了。

4.这里我们需要给圆点设置互斥，同时选中全部圆点，设置选项组。起个名字。

5.我们先设置点击圆点跳转图片的交互。新建交互，单击时，设置面板状态

6.State选择你要跳转的图片，我们第一个圆点就是第一个图片嘛。其他圆点就是其他图片。剩下三个圆点同样操作。

7.接下来我们实现切换图片就切换圆点的功能。

点击我们的动态面板。给上面设置好的情形添加动作。情形下面的 + 号即是添加动作。

9.选择“设置选中”

10.选择元件，这时候我们给元件设置名字的好处了，方便我们快速选择我们的元件，不会选错元件。

11.给圆点元件设置“真”值，这里的意思是当我们选中到圆点的时候令他为真值。

12.其他情形同样操作。如图所示即可。

13.然后我们给圆点设置交互样式，右键选中我们的圆点，选择交互样式。

14.在交互样式里，我们选择“选中”——“填充颜色”。其他圆点同操作。选择你喜欢的样式颜色。

15.进入页面查看我们的轮播图与小圆点的功能都实现了，但是细心的小伙伴会发现还有一个问题：进入页面时第一个图片的第一个圆点没有选中。

这时候我们只需要给第一个圆点右键选中即可。

16.我们看看效果吧。

 （三）鼠标移入到轮播图图片时暂停播放，移出时恢复播放。

1.选中动态面板，新建交互。移入鼠标时。

2.设置面板状态

3.在STATE中选择停止播放。.

4.同样鼠标移除时，我们再给它设置自动播放就好了。

5.我们看看效果吧。鼠标移入轮播图就会暂停播放。 移出又会继续播放。

总结：

  我们使用动态面板实现轮播图的基本功能都实现了。轮播图作为网页一个重要的元素，但是不难，需要我们理清思路。大家都需要熟悉掌握哦！轮播图的使用有助于我们可以熟悉的运用交互事件。轮播图实现了，那么Axure中的其他功能也不在话下了。加油！