2018-08-24

在Axure RP 8的触发事件中新增了【选中时】这个触发事件。

利用这个触发事件我们也可以实现图片轮播的交互。

首先，我们先来看一下要实现的案例效果。

上面这张图，我们基本上能看出来这个案例要实现的交互。

1、同一区域有四张广告图片进行不停的切换；

2、广告图片对应的底部圆点标签同步被选中。

按照以往大多的实现方式，是在一个动态面板的多个状态中放置不同的图片，开启动态面板的循环功能，并且在动态面板状态切换时，通过判断当前是哪一个状态，选中对应的圆点标签。

这种常用的方式有个小问题，就是圆点标签选中的切换是在图片切换的动画之后。

在这里，我们换一种方式。

我的思路是这样的：

1、让底部的圆点标签有唯一选中的效果；

2、每一个圆点标签选中时都做三个动作，设置动态面板状态为对应的状态、等待一定时长以及选中下一个圆点标签；

3、页面打开时，选中第一个圆点标签，这样就能开启幻灯片的轮流播放。

接下来，我们先准备好元件，并为元件命名。

然后，我们一起来看实现步骤。

1、先让圆点标签有唯一选中的效果。

我们需要做三件事，来完成这个需求，这里我们先完成其中的两件。

全选圆点标签，为它们设置一样的【选中】时的交互样式；这一步是为了圆点标签变为选中状态时能够改变颜色。

继续在上一步的功能界面中，为全部圆点标签【设置选项组名称】为“Tag”；这一步是为了让一组圆点标签中，只有一个能够变为选中状态。

2、我们给任意一个圆点标签添加交互，以第一个圆点标签“Tag1”为例。

在圆点标签被【选中时】，要将动态面板“SlidePanel”切换到对应的状态从而显示对应的广告图片。

这里大家注意，【设置面板状态】的动作设置中，我们要将目标元件“SlidePanel”的状态选择为【Value】，也就是值。

选择之后，在下方出现了新的设置“状态名称或序号”，也就是说我们可以通过动态面板状态的名称或序号，将动态面板切换到指定的状态。

这里我们要用的是序号。

动态面板状态的序号就是在概要面板中，各个状态由上至下排列的顺序号。

也就是当我们点击圆点标签“Tag1”的时候，要把动态面板切换到序号为“1”的状态；

点击圆点标签“Tag2”的时候，要把动态面板切换到序号为“2”的状态；以此类推。

那么，这个序号我们可以填写固定的数字。

不过，大家能够看到圆点标签名称的最后一位字符就是与序号相同的数字，如果我们取到这个数字，填在输入框中，也可以完成这个设置。

这个数字我们可以通过公式“[[This.name.slice(-1)]]”来获取。

公式中“This.name”可以获取到当前被选中的圆点标签的名称。

而“.slice(-1)”是字符串截取函数，它可以输入两个参数（截取的起始位置和终止位置），也可以输入一个参数（截取的起始位置）；当只输入一个参数时，能够对字符串对象从起始位置截取到末尾；并且。这个函数的参数可以为负数，输入负数的话，是从末尾进行倒数的位置；这里的“-1”，表示倒数第1位字符。

所以，公式“[[This.name.slice(-1)]]”的意思是获取“当前元件的名称的最后一位”。

填入公式之后，我们再设置一下状态切换的动画，就完成了这个动作。

3、继续上一步，我们再添加一个【等待】的动作，以便等待“2000”毫秒后，选中下一个标签。

4、继续上一步，添加【选中】下一个圆点标签的动作，因为是在给第1个圆点标签“Tag1”添加交互，这里我们选中下一个圆点标签就是“Tag2”。

这一步，就是圆点标签唯一选中效果要做的第3件事，把圆点标签变为选中状态。

5、完成了上面的几步之后，我们把第1个圆点标签【选中时】的交互复制，粘贴给其它三个圆点标签。

粘贴之后，从第2个圆点标签开始，逐一修改最后一个选中圆点标签的动作，为选中当前圆点标签的下一个标签。

6、为第1个圆点标签的【载入时】添加交互，【选中】当前这个圆点标签。

这样，在页面打开后，第1个圆点标签会被选中，从而触发第1个圆点标签的【选中时】交互，通过运行交互中的动作，在完成动态面板的状态切换以及等待2秒钟的动作之后，又通过最后一个【选中】下一个圆点标签的动作触发了下一个圆点标签【选中时】的交互。

以此类推，形成了循环的效果。

以上就是整个案例的实现过程。

感谢大家对Axure原创教程网的支持！