Axure RP9 ——【banner轮播效果】实现

 

banner 轮播效果

 

目录

 

banner 轮播效果

I.定义

II.实现步骤

1.图片轮播效果

2.设置按钮

3.实现点击圆圈，轮询到对应图片

4.效果

5.加入左右滑动按钮

---

---

I.定义

就是一套图片以一定时间间隔自动循环播放，同时用户也可以选择图片实现点播的效果。

 

II.实现步骤

1.图片轮播效果

①先放置3张图，大小相同；

②将其转化为动态面板，命名为banner，并分别添加状态，（state1,2,3）；坐标为（0,0），大小同；

③设置交互：载入时——设置面板状态——目标banner——下一项，向后循环，动作（向左滑动）；循环间隔3000ms

2.设置按钮

①先设置三个圆圈；并转为动态面板；，命名为点；3个状态，黑色代表选中的状态；

②让圆圈跟着图片对应动起来

        

 

3.实现点击圆圈，轮询到对应图片

①进入到动态面板编辑界面，state1；对第二个圆圈进行交互设置

逻辑：点击第二个圆圈时，可以切换到对应的第二个图片；且不点击的时候，可以自动轮播，不影响其他设置。

（1）交互1：单击时，可以切换到对应图片

单击时——设置面板状态——banner 状态2——循环模式设置；点——状态2，不需要动画

        

（2）交互2：设置一个等待时长；（这里的时间，要和图片的轮播时间一样）

（3）交互3：

要实现自动循环的功能；对点和banner设置循环；

       

 

（4）以上是完整的对于第二个圆圈的交互动作；理清后，其他同理。

对于第三个，只需将状态2改为，状态3即可；

动态面板-点：sate1中的第三个圆圈交互动作：

动态面板-点：sate2中的第1个圆圈交互动作；第三个圆圈同上；

动态面板-点：sate3中的第2个圆圈交互动作；第一个同上第一个圆圈。

4.效果

Axure RP9 banner轮播效果实现

 

5.加入左右滑动按钮

（1）导入2个矢量图片，实现点击后，可以轮询

（2）设置交互

右侧按钮：

左侧按钮：

注意：要设置2个，第一个针对于按钮，第二个针对于向后循环；

①设置面板状态，向上循环

     

②设置面板状态：

     

 

Axure RP9 轮播循环实现