使用Axure8.0制作轮播图

1.前期准备

先在画布中拉入三个元件,分别是Box, Image, Ellipse,如下图所示:

Snip20170704_1.png

2.对元件进行编辑

• 全选三个Ellipse, 然后设置Selection Group 为tag(这个随便起名),这是为了当选中的时候,这组中只有一个高亮显示

  
  Snip20170704_4.png

• 设置选中的时候的颜色

  
  Snip20170704_6.png

• 分别设置Ellipse的名字为tag1, tag2, tag3

Snip20170704_5.png

• 在属性面板区域选中Image元件, 右键会弹出个对话框,如下图所示,然后选择将其转换成动态面板

Snip20170704_7.png

• 转换成动态面板后, 会出现State1, 把鼠标移动到它上面,右侧会出现 复制状态, 因为我这里要做三张图片轮播, 所以就复制两次就可以了,如下图所示:

Snip20170704_9.png

• 在对Ellipse进行操作, 先对tag1进行编辑, 添加case(用例)选中tag1然后在 More Events里下拉选择OnSelected

Snip20170704_10.png

• 在弹出的框里选择 Set Panel State,在勾选设置, Select state 选择value, 动画向左滑动, 时间按需设置, 重点说下 Name or State , 公式This.name可以获取当前元件的名字, slice这个函数需要可以传两个值也可以传一个值, 当传两个值的时候表示从哪到哪, 传一个值的时候表示从哪到最后, 也是可以传负数的, 表示从后面倒数多少, 到最后. 那么这里传-1, 就是可以获取到tag1里的1.

Snip20170704_12.png

• 设置等待时间

Snip20170704_15.png

• 设置滑动的时候下一张是谁, 如下图

Snip20170704_13.png

• 复制这个case粘贴给tag2和tag3, 然后设置下指向
• 最后针对tag1, 添加另外一个case ,同样的, More Events 下拉选择OnLoad, selected, 选择tag1自己, 这个操作就是一启动的时候就选择了tag1

• 全部配置好的case如下:

tag1.png tag2.png tag3.png

3.预览效果

Untitled.gif