• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Axure实现轮播效果

互联网 diligentman 4天前 7次浏览

打开axure软件,拖入一个动态面板的元件,并设置动态面板的状态有三个,如下图:

 

Axure实现轮播效果

然后进入每个state中,拖入矩形框元件(可以使用图片)

在state1中,设置矩形框的颜色为红色

 

Axure实现轮播效果

在state2中,设置矩形框的颜色为绿色

 

Axure实现轮播效果

在state3中,设置矩形框的颜色为黄色

 

Axure实现轮播效果

再回到主页面中,选中动态面板,在载入时,选择 设置面板状态,设置状态为下一个,并且勾选向后循环、循环间隔设置为1000毫秒,即可完成轮播的效果。

 

Axure实现轮播效果

接下来设置小圆点,且小圆点会跟随主图的发生变化,这里我们设置小圆点选中为紫色。

我们首先在主界面上,放置3个小圆点,并选中这3个小圆点,设置组名称为123

 

Axure实现轮播效果

 

Axure实现轮播效果

点击右边的选中按钮,设置选中后的状态:

 

Axure实现轮播效果

同时勾选选中

 

Axure实现轮播效果

在交互设计时添加鼠标单击的效果,设置两个内容,第一个是选中动态面板的state1,第二个是选中动态面板,并选中下一个(表示继续循环)

 

Axure实现轮播效果

按上面的步骤依次设置第二个小圆点和第三个小圆点。

最后我们选中动态面板,设置状态改变时的交互:

 

Axure实现轮播效果

单击添加条件,选中state1

 

Axure实现轮播效果

在选中小圆点1,并设置状态为true

Axure实现轮播效果

同样的操作,当为state2时选中小圆点2,当为state3时选中小圆点3。

{{o.name}}


{{m.name}}


喜欢 (0)