• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure原型设计之轮播图

Axure原型设计之轮播图

作者: @维度 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure原型库,axure原型案例下载,axure原型,axure原型图,axure原型设计实例等相关知识, @维度 希望在学习及工作中可以帮助到您

轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助。现在讲讲如何使用axure8.0制作轮播图原型~~

步骤一:(轮播图动态面板)

首先,拖一个动态面板至画布中间,设置大小为670X320,命名为“轮播图”;

然后,为该动态面板设置3个面板状态,分别为图1,图2和图3,并分别在每个面板状态分别放一张图片;

最后,为该动态面板添加一个“载入时”用例,在用例中设置面板状态为:

  • 选择状态:Next,向后循环,循环间隔4000ms;
  • 进入动画:向左滑动700ms;
  • 退出动画:向左滑动700ms。

步骤二:(轮播按钮动态面板)

首先,拖一个动态面板至“轮播图”动态面板的正下方适当位置,设置大小为134X11,命名为“轮播按钮”;

然后,为该动态面板设置3个面板状态,分别为轮播按钮1,轮播按钮2和轮播按钮3,并在每个面板状态分别放3个白色矩形。轮播按钮1状态中的第1个白色矩形透明度设置为50%,轮播按钮2状态中的第2个白色矩形透明度设置为50%,轮播按钮3状态中的第3个白色矩形透明度设置为50%;

最后,为该动态面板添加一个“载入时”用例,用例中设置面板状态为:

  • 选择状态:Next,向后循环,循环间隔4000ms;
  • 进入动画:逐渐700ms;
  • 退出动画:逐渐700ms。

好了!预览即可以看到轮播图自动轮播的效果了,同时轮播按钮也跟随着变化。

效果图:http://ahzcnr.axshare.com/

您可能想查找下面的文章:

  • Axure原型设计之轮播图
  • Axure原型技巧 | 这回我们模拟下键盘输入

相关文章

  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动
  • 2017-06-14Axure 制作下拉框省市县三级联动
  • 2017-06-13Axure教程:移动端原型如何适配不同分辨率的手机?
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(下)
  • 2017-06-14Axure教程 | 原型中的商品图放大镜效果
  • 2017-06-13Axure中继器:制作可交互的“APP音乐播放列表页”
  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-13自定义微信元件库:Axure基本元件的应用(下)
  • 2017-06-14Axure7.0教程(七)math函数的使用(2)Math函数简介
  • 2017-06-14建立自己的元件库(二)——验证码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure实例:制作一个通用的移动端内容滚动区
    • Axure7.0教程(三)中继器的使用(3)
    • Axure教程 | 图片放大器
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
    • Axure实战:滑动拼图解锁教程
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • 自定义微信元件库:Axure基本元件的应用(下)
    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
    • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
    • 自定义微信元件库:Axure基本元件的应用(上)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有