1、打开【Axure】软件,在index文件上新建一个375*667大小的背景矩形并绘制页面。

具体如图所示。

2、在banner的位置上新建一个【动态面板】,双击动态面板在其中新建state1、state2、state3、并依次单击重新命名成banner1、banenr2、banner3。具体如图所示。

3、在右侧的页面模块上双击【banner1】进入到banner1的内页中,并新建一个矩形填充【006600】的颜色。具体如图所示。

4、在右侧的页面模块上双击【banner2】进入到banner2的内页中,并新建一个矩形填充【CC0000】的颜色。具体如图所示。

5、在右侧的页面模块上双击【banner3】进入到banner3的内页中,并新建一个矩形填充【FF9900】的颜色。具体如图所示。

6、回到首页,选择动态面板给他命一个名字【banner】选择交互中的【载入时】选择设置面板状态,勾选【banner】动态面板,选择状态【next】勾选【向后循环】勾选【循环间隔1000毫秒】,具体如图所示。

7、回到首页,在banner动态面板上再次新建一个【动态面板】并重新命名为【轮播点】,具体如图所示。

8、双击【轮播点】动态面板,新建三个内页【轮播点1、轮播点2、轮播点3】具体如图所示。

9、点击轮播点1中绘制三个【圆形】,并把第一个圆形填充成点亮的颜色【666666】,具体如图所示。

10、点击轮播点2中绘制三个【圆形】,并把第二个圆形填充成点亮的颜色【666666】,点击轮播点3中绘制三个【圆形】,并把第三个圆形填充成点亮的颜色【666666】,具体如图所示。

11、回到首页,在右侧交互面板上选择【载入时】,回到首页,勾选【轮播点】动态面板,选择状态【next】勾选【向后循环】勾选【循环间隔1000毫秒】,具体如图所示。

来源:千锋UI设计

最详细的Axure动态面板使用教程的更多相关文章

  1. axure 动态面板制作图片轮播 (01图片轮播)

    利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...

  2. Axure 动态面板的状态与尺寸

    知识点: 1.动态面板的状态下相当动态面版的模式,当符合某种条件的话就选择对应的动态面板的状态 2.动态面板的尺寸可以根据内容自动调整大小 本节教程主要分为一下图片两种场景: 出现动态面板中的两种.一 ...

  3. axure 动态面板实现图片轮播效果(淘宝)

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  4. Axure教程:如何使用动态面板?动态面板功能详解

    写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是a ...

  5. axure rp教程(四)动态面板滑动效果

    转载自: http://www.iaxure.com/74.html 实现目标: 1.  点击登录滑出登录面板 2.  点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准备需 ...

  6. Axure Base 08 动态面板的用途

    写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板 动态面板是axure原 ...

  7. Axure Base 10 动态面板滑动效果

    示例原型:http://pan.baidu.com/s/1mgjYahi 实现目标: 1.  点击登录滑出登录面板 2.  点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准 ...

  8. 动态面板——axure线框图部件库介绍

    1.什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度.动态面板包含有多个状态(states),每个状 ...

  9. Axure 第一次接触动态面板

    动态面板可以理解为有多维空间的一个容器,里面可以设置多个state,每个state里面可以放多个元件 先把对应的元件设置为动态面板并且隐藏: 本段教程主要包括三种应用场景: 1.邮箱不为空.密码为空时 ...

随机推荐

  1. vim字符串替换及小技巧

    vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询. :s/vivian/s ...

  2. 1.3.2、CDH 搭建Hadoop在安装之前(端口---Cloudera Navigator加密使用的端口)

    列出的所有端口都是TCP. 在下表中,每个端口的“ 访问要求”列通常是“内部”或“外部”.在此上下文中,“内部”表示端口仅用于组件之间的通信; “外部”表示该端口可用于内部或外部通信. 零件 服务 港 ...

  3. web.xml中<security-constraint>和四种认证类型

    https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...

  4. python--第三天总结

    [collection系列]1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 c = Counter('abcdeabc ...

  5. php拓展

    https://github.com/phalcon/zephirhttp://blog.csdn.net/black_OX/article/details/43700707

  6. java面试题:Linux

    Q:Linux怎么查端口?端口被占用怎么办? netstat -ntulp | grep 2181//查看2181端口号 netstat -pan | grep 2181 //查看2181端口号 如下 ...

  7. c++:空构造空析构的益处之一

    项目开发过程中发现一个问题,有段代码,一个动态库的cpp代码里不包含头文件中类的空构造空析构实现,就会出现编译出的动态库依赖项少了很多.而添加后则多了好几个依赖项.下面看例子: ##a.h class ...

  8. Selenium 定位元素原理,基本API,显示等待,隐式等待,重试机制等等

    Selenium  如何定位动态元素: 测试的时候会遇到元素每次变动的情况,例如: <div id="btn-attention_2030295">...</di ...

  9. 100-days: Seven

    Title: Can baiju, China's sorghum firewater, go global? sorghum n. 高粱 firewater n. 烈酒 Baijiu——a broa ...

  10. 33 【kebernetes】一个错误的解决方案

    在安装或者重新安装kubernetes时,我碰到了这个错误: Unable to update cni config: No networks found in /etc/cni/net.d/ 这个错 ...