广告轮播banner图，是PC或APP上最基本的交互。我们利用Axure可以快速设计实现该交互。

具体功能点及操作：

1. 素材的准备

在Axure中画好自己需要的页面，轮播图中包含三个要素：轮播图片、焦点圆点、左右箭头。

功能一：轮播图自动轮播

1、选中轮播图区域，将该区域转化为动态面板。

2、双击该区域，对面板状态进行管理，可以设置该动态面板名称，有几张轮播图片，可以设计几个面板状态，同时给面板状态命名。

3、分别点击进入各个面板状态，配置好想要的轮播图片。

4、设置交互，选择载入时，面板状态设置为Next，向后循环，循环间隔可根据需要设置，同时可以设置进入动画。

以上四步，就完成了轮播图自动轮播的设置。

功能二：点击焦点后轮播图变化，同时焦点跟随轮播图选中。

焦点跟随图片变化有多种实现方式，这里只写一种，有需要的朋友可以自己尝试其他方式。

1、将焦点全部选中，点击右键，将焦点设置选项组，同时给该选项组命名。再分别点击各个焦点，给各个焦点分别命名。（这里的焦点我直接使用的是椭圆形空间，大家可以根据需要设置不同的形状）

2、分别选中各个焦点，进行点击后轮播图面板变化的设置。

选中焦点1，在交互中选择“鼠标点击时”，选择将面板状态设置为下一个面板状态，例如从state to state1，同时设置动画效果和时间，注意：这里的动画效果和时间，需要和功能一中的图片自动轮播动画效果和时间保持一致。

选择焦点2，在交互中选择“鼠标点击时”，选择将面板状态设置为下一个面板状态，例如从state to state2，同时设置动画效果和时间。

选择焦点3，在交互中选择“鼠标点击时”，选择将面板状态设置为下一个面板状态，例如从state to state3，同时设置动画效果和时间。

3、选中轮播图面板，添加交互用例。

用例1：设置条件，当轮播图面板为轮播图1时，第一个焦点被选中。先在条件设置中，设置if 面板状态=轮播图1，再设置选中，将之前命名好的焦点1，设置为选中（ture)。

用例2：为保证在点击切换图片之后，仍然能够保持图片的自动轮播，需要设置该步骤。将面板状态设置为轮播图Next，向后循环，循环间隔和动画时间都跟之前设置自动轮播是保持一致。

以上这两个用例，请重复设置，有几个焦点需要设置几次。

4、刚才已经设置了焦点的选中状态，下面需要检查一下选中状态是否是自己想要的样式。点击焦点，在右侧形状-交互样式设置-选中里，可以设置选中的样式，一般只需要将填充颜色做一下修改即可。

同时，选择第一个焦点，将该焦点设置为默认选中状态。这样在实际生成的交互中，默认一进入页面，选择的就是第一张图片。

注意：这一步必不可少，不然就会出现已经设置好了焦点选中，但是实际生成的交互中看不出选中效果，这是因为没有设置好选中的颜色。

以上四步，就完成了点击焦点轮播图变化，同时焦点跟随轮播图选中的效果。

功能三：设置左右箭头，鼠标移入区域时箭头显示，移出时箭头隐藏，单击箭头轮播图变化。

1、在轮播图上放置左右两个箭头，两个箭头分别设置交互用例。

左箭头：设置点击箭头时，面板状态previous，动画和时间都等同于轮播图设置。

右箭头：设置点击箭头时，面板状态为next，动画和时间都等同于轮播图设置。

2、选中左右箭头和轮播图，整个一起转化为动态面板。在该动态面板上设置以下两个用例：

用例1：设置载入面板时，左右箭头隐藏。

用例2：设置鼠标移入时，左右箭头显示，鼠标移出时，左右箭头隐藏。

以上两步，完成了点击左右箭头，轮播图片随之变化，同时，只有当鼠标移入轮播图区域时，箭头才出现的效果。

整体效果：