1.Axure动态面板之轮播图显示

Axure中动态面板常用来实现交互效果,如:

  1. 使用动态面板制作轮播图。
  2. 使用动态面板制作tab页面切换。
  3. 使用动态面板制作弹出对话框。
    ....

本节使用的动态面板来实现轮播图的效果。

效果:

  1. 页面载入时,进行三张图片的轮播,时间间隔为N秒,且轮播的时候,底部小红点跟随图片顺序进行切换。
  2. 当鼠标移入轮播图时,图片停止轮播,当鼠标移出,轮播继续。

实现步骤:

a. 元器准备

1.拖入动态面板并命名为“手游”,并制作三种静态状态,分别为“玩着荣耀”、“开心消消乐”、“阴阳师”。


1.Axure动态面板之轮播图显示_第1张图片

2.编辑每个状态。(双击或者右键-编辑 进入编辑状态)


1.Axure动态面板之轮播图显示_第2张图片

每个页面包含四个控件:图片+三个圆点
1.Axure动态面板之轮播图显示_第3张图片

接下来单独修改每个静态页面的内容,效果如下,记得改变圆点的颜色


1.Axure动态面板之轮播图显示_第4张图片

b. 交互效果

  1. 为动态面板添加交互效果
    即实现鼠标移入时停止轮播


    1.Axure动态面板之轮播图显示_第5张图片

    鼠标移出时,继续轮播。


    1.Axure动态面板之轮播图显示_第6张图片
  2. 为页面添加交互效果,实现当页面载入时,轮播开始。


    1.Axure动态面板之轮播图显示_第7张图片

源文件:

  1. Axure Share地址
  2. 百度网盘:http://pan.baidu.com/s/1mh6j7Kk 密码: cl7s

你可能感兴趣的:(1.Axure动态面板之轮播图显示)