• 页面打开时：（图1-82）

固定区域循環播放一组图片（幻灯片效果）圆形分页标签随着播放不同的图片，而对应改变样式

• 页面中：（图1-83）

• 动态面板（多状态添加图片）：SlidePanel
• 矩形（圆点分页标签）：Tag1~Tag5

• 利用动态面板可添加多个状态的特性，创建5个状态；（操作步骤1）
• 将5张需要展示的图片放到各个状态里面；（操莋步骤2~3）
• 将圆点分页标签做成只能唯一被选中的效果并设置第一个圆点默认被选中；（操作步骤4）
• 页面打开后，开启图片循环播放的效果；（操作步骤5）
• 每次切换到新的图片时根据状态名称选中圆点分页标签，呈现橙色效果（操作步骤6~10）

1、拖入动态面板到画布，命名為“SlidePanel”双击动态面板（或者在概要面板中鼠标双击动态面板名称），点击【+】图标为动态面板添加5个状态；（图1-84）

2、双击进入状态“State1”，添加一张图片到画布左上顶点的位置；（图1-85）

3、参考上一步将剩余四张图片分别放入到状态“State1”~“State5”中；（图1-86）

4、拖入一个矩形，設置为圆形在元件属性中为其设置【选中】的样式，{设置选项组名称}为“Tag”并调整为合适的大小；点中此元件，按<Ctrl+D>键复制成5个后摆放在合适的位置上；因为这几个元件变小后不易操作，可以在概要面板中为这几个命名为“Tag1”~“Tag5”；（图1-87）

5、点中动态面板“SlidePanel”，为其【载入时】事件添加用例设置动作为【设置面板状态】“SlidePanel”为【Next】；同时，勾选【向后循环】与【循环间隔】的选项并设置自动循环間隔的时长为“2000”毫秒；一般来说，页面打开时不会直接切换到第二个状态，所以这里还要勾选【首个状态延时***毫秒后切换】；最后設置下个状态进入与当前状态退出的动画均为【向左滑动】“500”毫秒；

• 用例动作设置：(图1-88)

6、为动态面板“SlidePanel”的【状态切换时】事件添加用唎1；为用例添加条件判断，判断【面板状态】“SlidePanel”【==】【面板状态】“State1”；

• 条件判断设置：（图1-89）

7、继续上一步添加符合该条件的动作，【选中】元件“Tag1”；

• 用例动作设置：（图1-90）

8、再次双击事件的名称或双击点击【+】参照用例1添加用例2的条件和动作；判断【面板状态】“SlidePanel”【==】【面板状态】“State2”；动作为【选中】元件“Tag2”；

• 事件交互设置：（图1-91）

9、参照用例2，依次添加用例3~4；

10、因为除去用例1~用例4的判断内容，就只剩下最后一种情形；所以用例5无需进行条件内容的设置，直接设置动作为【选中】元件“Tag5”

• 事件交互设置：（图1-92）

特別提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

小楼老师再出新作倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程