Axure教程-Banner图片轮播（二）-热区与条件判断

在《Axure教程 Banner图片轮播（一）》基础上增加图片切换按钮。

效果：

轮播2

元件：动态面板和热区

步骤：

1，继续添加动态面反，设置如下：

2,在state1中添加添加三个“㮋圆形”元件，均匀排开，设置如下图；

3,其中一个设置为高亮代表当面幻灯片图片，其他为白色；同理设置其他两个幻灯片的按钮。
按钮state1–>幻灯片state1
按钮state2–>幻灯片state2
按钮state3–>幻灯片state3



4,添加三个热区；

5，在热区上添加动作，点击“热区1”，点击“鼠标单击时”，添加如下动态面板动作；
6，“轮播”动态面板动作设置；

“按钮”动态面板动设置；

同样的方式设置其他两个热区动作；
热区1–>按钮state1–>幻灯片state1
热区2–按钮state2–>幻灯片state2
热区3–按钮state3–>幻灯片state3
7,将热区与按钮位置移至幻灯版动态面板中合适位置，要求，热点区最上面，按钮中间，幻灯片位置最底。
产生新问题：由于幻灯片图加载时自动轮播，会造按钮状态与幻灯片一致，为了实现幻灯片与按钮一致，就需要设置当幻灯片的变的时候，按钮面板状态也需要设置成一致。
8，点击幻灯片动态面板，点击“状态改变时；
9，点击“编辑条件，设置如下，点击“确定”；

9，再设置按钮动作，轮播为1-按钮也为1；

重复步骤添加状态为2，3时的动作。

Axure源文件下载地址：
链接：https://pan.baidu.com/s/1uk2lBvnGKJMIG5tA9hhDrg
提取码：lktb