【转】AxureRP8实战手册-案例12（动态面板：自动图片切换）
AxureRP8实战手册-案例12（动态面板：自动图片切换）
案例12. 动态面板：自动图片切换
案例来源:
淘宝-首页
案例效果：
- 页面打开时：（图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）
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。