• 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原型设计之轮播图

作者: @维度 字体:[增加 减小] 来源:互联网

本文主要包含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原型技巧 | 这回我们模拟下键盘输入

相关文章

  • Axure PR 7.0 实现页面纵向滑动效果
  • Axure教程:动态面板实现广告循环播放
  • Axure8.0原型案例:制作手机拨号界面
  • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
  • Axure中继器姊妹篇:列表页添加排序和筛选功能
  • Axure教程:移动端原型如何适配不同分辨率的手机?
  • Axure7.0教程(二)中继器的使用(2)
  • Axure教程 | 详解中继器的九宫格
  • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
  • Axure7.0教程(八)函数介绍

文章分类

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

最近更新的内容

    • Axure7.0教程(一)中继器的使用(1)
    • Axure教程:导航栏和广告悬停效果制作
    • Axure教程:原型设计之水泡导航栏
    • Axure 7.0实例:利用Axure制作放大镜原型
    • Axure教程:实现倒计时获取验证码效果
    • Axure教程 | 详解中继器的九宫格
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
    • Axure RP8 动态面板之轮播图设置

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

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