对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的。那么,下边我就来分享一下使用axure的动态面板制作轮播图的过程吧。

1.在元件库Default下找到动态面板 ,将其拖动到页面中

2.双击动态面板进入动态面板的编辑区,点击状态区,可展示状态列表。点击新增状态可根据需求增加状态。

3.下边我所要制作的轮播图包含三张图片,所以我需要有三个状态,对于每个状态我们还可以对它进行命名。(这里建议命名,方便后期操作中对各个状态进行辨别)

4.选中first状态,将图像控件拖入状态面板中,调节调节控件大小后导入图片

导入图片

 5.选中second状态,同样将图片控件拉入,调节图片控件大小后将图片导入(后边的third状态操作同上)

导入图片

6.当你对动态面板的各个状态面板设置完毕后,点击关闭。而后单击页面空白处,点击新建交互。

选择页面载入时

选择设置面板状态

目标原件选择动态面板 ,状态选择“下一个”(这里也可以选择“上一个”)并勾选“从最后一个到第一个自动循环”,而后进入时动画选择“向左滑动”、时间默认500毫秒(可根据自己的喜好自由设置)。这里要注意的是要在更多选项中勾选“循环时间间隔”并设置好循环时间,不然当页面加载时它不会自动轮播。当各个选项设置完毕后点击确定按钮,完成交互设置。

 

 在交互设置完毕后,点击预览,即可在浏览器中显示最初始的轮播图

lunbo

7.对轮播图的小圆圈选中样式进行编辑设置

将椭圆元件拖入页面中

 按住ctrl键挨个点击各个圆圈将其选中后,右键选择样式效果,为其设置选中时的样式效果

8.实现动态面板的状态何小圆圈的选中联动。 

首先为动态面板新建交互

选择动态面板状态改变时

而后不要做任何选择,直接点击页面空白处,让交互呈现如下

鼠标移入时会显示箭头所指的按钮,点击它

 将出现如下页面

点击添加逻辑,选择状态first后点击确定 

 在这个逻辑之下添加动作

 如下图进行原件选择,选择完毕后点击确定按钮即可完成椭圆1和轮播图状态first的关联。

如果你的椭圆还未曾命名,请看如下操作

 对于剩下的小圈圈的关联,对于上边的操作举一反三即可,这里我再演示second状态和第二个小圈圈的选中关联。

(1)

(2)

(3)

 (4)

(5)

(6) 选择完毕后点击确定即可

 

 后边的第三各个关联我想聪明可爱的你已经完全学会操作了吧

8.设置默认选中第一个圈圈

9.为了实现三个圈圈之间的互斥,也就是三个圈圈中选中其中一个,其余的圈圈都不选中。其实很简单,只需将它们三个圈圈加入到一个选择组中即可。

(1)

 

(2)

(3)完成后点击确定即可10

 10.最后点击预览,即可大功告成!

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐