美文网首页
Axure8-元件案例之动态轮播图

Axure8-元件案例之动态轮播图

作者: 大风过岗 | 来源:发表于2019-10-17 10:21 被阅读0次

轮播图

需求: 固定区域循环播放一组图片。

要点

为动态面板添加加载事件,当加载时,自动切换Next状态
自动切换状态

操作步骤

1、拖拽出一个动态面板slidepanel

2、在动态面板上,绘制5个圆圈tag,标号为: tag1~tag5

3、为动态面板添加五个状态: stat1~state5

4、为动态面板添加加载事件,当加载时,自动切换Next状态

5、为状态切换事件,设置case

为动态面板添加状态变化事件:

状态变化事件

当动态面板的状态变化为state1时,则执行 选中tag1的动作:

当状态切换至state1时选中tag1元件

最终效果

最终效果如下:

轮播效果

相关文章

  • Axure8-元件案例之动态轮播图

    轮播图 需求: 固定区域循环播放一组图片。 要点 为动态面板添加加载事件,当加载时,自动切换Next状态 操作步骤...

  • Axure8-元件案例之动态面板制作banner图

    axure动态面板 有时候,我们需要在同一个区域内放置多个状态的内容,根据不同的情况比如点击事件,来显示不同的内容...

  • koa框架-实战(四)

    一、前台页面制作 二、轮播图动态渲染 三、动态路由 四、成功案例分类渲染以及渲染出所有成功案例下面的数据 $in ...

  • Axure案例——轮播图例制作

    Axure案例——轮播图例制作 制作流程: 1、添加轮播图的动态面板,注意,设置状态时,通过复制状态来设置; 2、...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 5.首页轮播图

    轮播图框架(GitHub搜索)flutter_swiper : ^1.1.6 静态轮播图 根据网络请求数据动态加载轮播图

  • 今日优秀案例

    【今日优秀案例】 名称:唐山旬膳里日料火锅 行业: 餐饮 组件:轮播图、自由面板、动态列表 点评:你问我如何让餐饮...

  • JavaScript实战项目:移动端 Touch 轮播图

    Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下。 1...

  • 原生js实现移动端Touch轮播图的方法步骤

    Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下。 1...

  • Axure8-元件案例之带图标文字的提示语

    元件案例-带图标文字的文本输入框 预计效果: 说明 为文本输入框设置提示语,我们可以在文本输入框的Hint属性中,...

网友评论

      本文标题:Axure8-元件案例之动态轮播图

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