Axure的轮播案例

轮播是学习Axure的经典案例,同时做轮播案例也要用到Axure中很多的知识点,比如动态面板,交互动作,交互样式,交互用例,交互事件等等
动态面板的理解:
动态面板的实质就是层,一个动态面板可以有多个状态,每个状态可包含一系列元件;正 是因为动态面板的存在实现了同一区域状态的变化。
· 任何时候都只有一个状态时可见的,一般都是默认第一个状态可见。
· 动态面板的状态可以隐藏、显示和改变。
· 将动态面板拖到界面后,可以根据需要改变面板大小、位置。
· 使用动态面板的情况:
页面中存某块内容在开始不显示,后来显示的情况;
在开始页面加载时不显示,后来显示的情况;
Tab页切换;
某块内容随着事件的不同显示位置不同的情况。
在这里插入图片描述

交互样式:设置同一对象不同样式,是针对元件本身的交互
交互事件:不仅可以针对元件本身,还可以针对其他元件作出交互动作
交互用例说明:在同一事件中,可以有多条用例。但是只会执行一条用例。在没有判断条件的情况下,出现多条用例,系统会让用户作出选择
用例:添加,删除,修改,复制,剪切,粘贴
交互用例中的条件设立
在这里插入图片描述

条件设立的解释如下图:

如下面轮播案例:
步骤:
① 首先从Axure的左边的基本原件里拖出”图片”,设置好想要的大小
② 将图片转为动态面板
③ 设计好按钮和小圆点
④ 在按钮和小圆点设置交互用例,交互动作,交互样式,交互事件
转为动态面板
在这里插入图片描述

设置自己想要的几屏面板(这里设置6屏面板)
在这里插入图片描述

设置动态面板载入时自动播放
在这里插入图片描述

设置左右按钮和组合左右按钮,同时给按钮设置上点击交互事件
在这里插入图片描述

给左和右按钮设置交互事件
在这里插入图片描述
在这里插入图片描述

在动态面板里设置小圆点,同时设置交互事件,这里的小圆点的交互事件的设置都是一样的,只要设置一个好了,其他的都可以复制了。
在这里插入图片描述
在这里插入图片描述

最后给整个动态面板设置鼠标移入时弹出左右按钮,鼠标移出时弹出左右按钮的点击事件,还有动态面板切换的状态改变时的判断和选中小圆点所对应的面板状态
在这里插入图片描述

这样就完成了动态面板的案例了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值