Axure8-元件案例之动态面板制作banner图

axure动态面板

有时候,我们需要在同一个区域内放置多个状态的内容,根据不同的情况比如点击事件,来显示不同的内容。这时候,就可以用到动态面板了。

Axure8-元件案例之动态面板制作banner图_第1张图片
Dynamic Panel

使用动态面板制作banner图

预计效果:

Axure8-元件案例之动态面板制作banner图_第2张图片
图1
Axure8-元件案例之动态面板制作banner图_第3张图片
图2
  • 实现思路
    创建一个动态面板,给这个动态面板设置多个状态,在不同的状态中展示不同的图片。同时,通过单击事件来展示不同状态下的图片内容。

实现步骤

1、拖拽一个动态面板置于画布上
Axure8-元件案例之动态面板制作banner图_第4张图片
动态面板

2、为动态面板添加5个状态

Axure8-元件案例之动态面板制作banner图_第5张图片
添加状态

3、为每个状态添加内容

双击state1即可打开对state1的编辑页面。把图片放置到state1内。

Axure8-元件案例之动态面板制作banner图_第6张图片
state1

4、重复4次

5、在动态面板上放置5个圆圈

Axure8-元件案例之动态面板制作banner图_第7张图片
放置5个圆圈

6、为每个圆圈设置单击事件

为第一个圆圈设置单击事件,使点击事件发生时,切换到动态面板的某一个state上。

Axure8-元件案例之动态面板制作banner图_第8张图片
单击事件切换面板状态

你可能感兴趣的:(Axure8-元件案例之动态面板制作banner图)