Axure8.0之轮播组件

Axure实现轮播组件主要用到了动态面板这个组件。动态面板的获取主要通过其他控件转化(比如图片组件右键选中动态面板转化为动态面板)和通过直接拖动的方式获得动态面板。

为什么轮播图可以用动态面板实现?
  • 动态面板有多个状态,每个状态下放一张图片,在不同状态下切换即可实现图片的切换,实现轮播的效果。
实现步骤:
  1. 拖动一个动态面板,拉成长方形,给动态面板增加三个状态,分别为:left、center、right。
    Axure8.0之轮播组件_第1张图片

    分别进入每个状态,添加一个图片元件,且给图片元件导入初始图片。
    Axure8.0之轮播组件_第2张图片

    当页面载入时,让动态面板不停地切换状态(Next)并且同时向滑动。
    Axure8.0之轮播组件_第3张图片

    以上即可粗略实现动态面板的切换效果,接下来实现动态面板的选项卡切换效果。
    先给每个椭圆添加选中时的颜色,针对每个选项添加如下事件
    Axure8.0之轮播组件_第4张图片

    事件分为两层意思,选中某个椭圆时,让选项卡进入对应的状态,且几秒后自动切换进入下一个状态,不停循环。
    下载元件

你可能感兴趣的:(Axure8.0之轮播组件)