作为Axure初学者，把最近学的东西记录下来，和大家一起学习。不管是在PC端还是移动端，轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。

还是先看下效果

自动轮播

人工点击下一张

鼠标悬浮停止和移开重新轮播

操作步骤

自动轮播的制作

1.选择Axure中的动态面板，新增3个状态，并从第一个开始命名 图1 ...图4，并为动态面板设置每个状态对应的图片，双击状态进入，找到合适的图片黏贴上去。 

2. 双击动态面板对增加4个状态， 然后双击每个状态进入之后制作4个图片

3.制作完4个图片之后，就开始了轮播的第一步

首先是进入这个页面加载的时候要自动轮播，在动态面板中添加载入事件 如图，设置Next，选择向后循环和每个图片的之间间隔的时间，再加上图片移入和移出的效果。

人工操作轮播

1. 添加左右的箭头，为了增加操作的区域，可以在箭头的地方增加一个大一点的热区，添加热区的事件 -鼠标单击 当鼠标点击之后图片切换到后一张，同时切换切换之后为了后续图片还可以接着轮播，还要复制载入的事件到鼠标单击中。这样就能单击之后既能实现切换下一个图片，也不至于让轮播停止。

鼠标悬浮停止和移开鼠标继续轮播

1. 为了使鼠标能在悬浮到图片上能停止轮播和鼠标移开移开之后能继续轮播。增加了鼠标停放事件和鼠标移出的事件

2.鼠标移开之后增加图片轮播，和载入事件的内容一致，可以直接复制过来。

轮播过程小圆点选中效果

1. 增加4个小圆点，设置-交互样式-选中-填充颜色 设置一个背景色。为了实现同一时间只能有一个小圆点为选中状态，增加 设置选项组（名称随便就好）

2. 然后在设置动态面板每个状态触发小圆点的选中状态。添加 状态改变时的事件，添加case1，即当播放第一个图片时把第1个小圆点作为选中状态。然后复制这个时间到另外3个Case。调整每个case对应的图片和圆点。

状态改变事件

设置条件

当条件满足时触发选中

2. 同时别忘记，在网页加载时展示第一个图片把第一个小圆点选中。

总结

动态面板可以看成网页的层次，设置不同的事件触发不同的层次的事件。不仅仅用在图片轮播上，还有其他的更多的应用场景，本篇只介绍了轮播的制作，后续增加其他的应用。