Axure8-元件案例之动态面板制作banner图
2019-10-16 本文已影响0人
大风过岗
axure动态面板
有时候,我们需要在同一个区域内放置多个状态的内容,根据不同的情况比如点击事件,来显示不同的内容。这时候,就可以用到动态面板了。
![](https://img.haomeiwen.com/i13084796/870f58320ca8073c.png)
使用动态面板制作banner图
预计效果:
![](https://img.haomeiwen.com/i13084796/80fd5d679c4afb66.png)
![](https://img.haomeiwen.com/i13084796/08ee89b5b014d3ad.png)
- 实现思路
创建一个动态面板,给这个动态面板设置多个状态,在不同的状态中展示不同的图片。同时,通过单击事件来展示不同状态下的图片内容。
实现步骤
1、拖拽一个动态面板置于画布上
![](https://img.haomeiwen.com/i13084796/d37824da79705f94.png)
2、为动态面板添加5个状态
![](https://img.haomeiwen.com/i13084796/2d5674efb8a146c7.png)
3、为每个状态添加内容
双击state1即可打开对state1的编辑页面。把图片放置到state1内。
![](https://img.haomeiwen.com/i13084796/33358c5bb56abb69.png)
4、重复4次
5、在动态面板上放置5个圆圈
![](https://img.haomeiwen.com/i13084796/3bf8f1fce58dc06c.png)
6、为每个圆圈设置单击事件
为第一个圆圈设置单击事件,使点击事件发生时,切换到动态面板的某一个state上。
![](https://img.haomeiwen.com/i13084796/491c162c875da6d4.png)