Axure的使用之轮播图

1.新建空白页面。

2.在元件库选择“动态面板”拖拽到页面中并命名。

图1

3.双击动态面板出现如下对话框,点击“加”号---点击“确定”,新建state(以四张图为例)。


图2

4.在如下区域双击对应的state,进入新的state页面,依次为每个state添加内容(若没有显示以下区域可点击菜单栏“视图”-“重置视图”)


图3

5.在新打开的state界面选择元件库的“图片”拖拽到页面中,双击图片插入合适的图片,调整图片大小与state一样大(超出state框的部分则会被隐藏)

图4

6.重复上述操作直到为每个state都插入内容。


图5

7.双击右边的Index以回到主页面。


图6

8.在元件库中选择两个左右箭头拖拽放到合适的位置。并同时选中动态面板和左右箭头,按鼠标右键,在弹出框中选择“组合”。


图7

9.选中两个箭头,点击“隐藏”。


图8

10.给整个组合添加上鼠标移入左右箭头显示的事件,点击确定。


图9

11.同上添加鼠标移出左右箭头隐藏的事件。


图10

12.给页面加上如下条件的页面载入事件。


图11

13.选中组合,双击鼠标移入时的case1下面的动作,将面板状态设为“停止循环”。


图12

14.选中组合,双击鼠标移出时的case1下面的动作,将面板状态设为“next”--“向后循环”。


图13

15.选中右箭头,加上如下鼠标单击事件。


图14

16.选中左箭头,加上如下鼠标单击事件。


图15

17.打开预览,轮播图就已经做好啦!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 小楼老师的教程汇总,一篇搞定! (一) Axure rp的界面 1-主菜单工具栏:大部分类似office软件,不做...
    纪同学说阅读 10,942评论 1 33
  • 一、Axure界面介绍 1、页面导航面板(Pages) Axure的页面管理采用类似操作系统的文件夹和页面文件的管...
    落霞__孤鹜阅读 56,001评论 7 46
  • 基础1:添加元件到画布 在左侧元件库中,选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置松开。 基础2:添...
    Kince_X阅读 8,144评论 0 7
  • 现在的网站很常见到一个页面占满一屏,鼠标滚动一下即是一屏,同时右下角也有一个侧边栏圆点导航,随页面滑动,切换选中不...
    truman12阅读 8,038评论 0 2
  • 今天和一个比较亲密的朋友聊天,她突然煞有介事地问我:虽然你看起来生活充实,悠然自得,但是你跟我说实话,作为一个大龄...
    秋田田阅读 2,656评论 1 2

友情链接更多精彩内容