美文网首页
Axure8.0之轮播组件

Axure8.0之轮播组件

作者: 沈正方 | 来源:发表于2018-07-02 18:12 被阅读9次

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

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

    分别进入每个状态,添加一个图片元件,且给图片元件导入初始图片。

    当页面载入时,让动态面板不停地切换状态(Next)并且同时向滑动。

    以上即可粗略实现动态面板的切换效果,接下来实现动态面板的选项卡切换效果。
    先给每个椭圆添加选中时的颜色,针对每个选项添加如下事件

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

相关文章

  • Axure8.0之轮播组件

    Axure实现轮播组件主要用到了动态面板这个组件。动态面板的获取主要通过其他控件转化(比如图片组件右键选中动态面板...

  • MUI组件(4)

    slide(轮播组件) 轮播组件是MUI提供的核心组件之一,基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动...

  • 面向对象实战

    封装轮播组件 轮播 封装曝光加载组件 曝光加载 封装Tab 组件 Tab组件

  • 组件

    题目1: 封装一个轮播组件轮播组件轮播组件2,使用IIFE 题目2: 封装一个曝光加载组件曝光加载组件 题目3: ...

  • 面向对象实战

    代码预览 tab组件懒加载组件无限轮播组件无限轮播二次封装组件modal组件日历组件

  • 面向对象 实战 -常用JS组件

    轮播组件轮播二次封装预览 曝光加载组件预览 Tab 组件预览 日历组件预览 Modal 组件预览

  • 封装组件-面向对象

    tab组件化tab组件化代码 图片曝光组件化图片曝光组件化代码 轮播组件化轮播组件化代码

  • 高级3 组件

    轮播组件曝光组件tab组件

  • 高级任务3 面向对象实战

    tab组件轮播组件曝光组件

  • 3面向对象实战

    参考:tab组件229曝光组件187轮播组件172轮播二次封装154 我的: 1: 封装一个轮播组件 http:/...

网友评论

      本文标题:Axure8.0之轮播组件

      本文链接:https://www.haomeiwen.com/subject/xngluftx.html