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

Axure RP8 动态面板之轮播图设置

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

本文主要包含axure rp8,axure rp8汉化包,axure rp8教程,axure rp8下载,axure rp8破解等相关知识, @Cassie 希望在学习及工作中可以帮助到您

爬行蟑螂也是刚开始使用Axure,自学的,不过Axure真心很强大,会一点一点的分享一些操作功能;最简单的操作步骤,这里分享动态面板之轮播图设置。

第一步:拖入动态面板,并命名为【轮播图测试】,给动态面板添加三种状态,分别命名为【banner1】、【banner2】、【banner3】;

第二步:双击动态面板,进入动态面板【banner1】编辑页面;如图,进入动态面板【banner2】【banner3】编辑页面也是如此,分别给三个动态面板拖入矩形框,分别给三个动态面板里面的矩形框填充不同的颜色(这里添加了文字以便对应),以示区分;如图效果;

第三步:添加轮播小按钮;分别在三个轮播图里面添加小按钮,并分别填充红色以示选中;如图所示

第四步:实现自动轮播;点击【轮播图测试】页面;选中动态面板;右边添加事件编辑栏——属性——载入时——添加动作,如下图,选择 【设置面板状态】——勾选【轮播测试图】动态面板——选择状态【Next】——勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;预览,基本的轮播循环就实现了;

第五步:设置【按钮控制效果】,进入动态面板【banner1】编辑页面;

1.选中【按钮1】——添加事件【等待】——设置等待时间为【1000】毫秒;

2.选中【按钮2】——添加事件【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为对应的【banner2】——进入动画【向左滑动】时间为【3000】毫秒,退出动画【向左滑动】时间为【3000】毫秒,然后确定即可;

继续?添加事件【等待】——设置等待时间为【1000】毫秒;

继续 添加事件?【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为【Next】————勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;

3.选中【按钮3】——添加事件【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为对应的【banner3】——进入动画【向左滑动】时间为【3000】毫秒,退出动画【向左滑动】时间为【3000】毫秒,然后确定即可;

继续?添加事件【等待】——设置等待时间为【1000】毫秒;

继续 添加事件?【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为【Next】————勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;

第五步:动态面板【banner2】、【banner3】里面的按钮效果时间设置和动态面板【banner1】一样;但是,对应的在2、3按钮的“配置动作”设置中,选择状态分别为对应的【banner2】、【banner3】;

点击运行,就可以实现自动轮播、点击按钮切换了。

这个里面的时间设置的有点长,如果要体验好一些的话,大家自己设置一个合适的时间即可。

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

  • Axure RP8 动态面板之折叠和展开(例如菜单栏)
  • Axure RP8 动态面板之轮播图设置
  • Axure实战:滑动拼图解锁教程

相关文章

  • 2017-06-13Axure教程:中继器如何切换标记状态?
  • 2017-06-14Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
  • 2017-06-14axure实现坦克游戏原型
  • 2017-06-14axure九宫格拼图的实现原理
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(下)
  • 2017-06-14Axure PR 7.0 实现页面纵向滑动效果
  • 2017-06-14如何优雅的用Axure装逼?高保真原型心得分享
  • 2017-06-14Axure7.0教程(一)中继器的使用(1)
  • 2017-06-14Axure教程 | 商品列表页筛选排序练习
  • 2017-06-14Axure8.0小案例:电动机原型

文章分类

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

最近更新的内容

    • Axure教程:中继器实现列表到详情页的数据传递
    • Axure 8.0 实例 | 模拟一个上传图片的原型
    • Axure中继器姊妹篇:列表页添加排序和筛选功能
    • Axure教程:用Axure实现晚会抽奖程序
    • Axure7.0教程(三)中继器的使用(3)
    • Axure实战:滑动拼图解锁教程
    • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
    • 中继器实践:双向列表操作
    • Axure教程:原型设计之侧滑菜单
    • Axure教程-锚点滚动效果

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

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