一些简单又高逼格的操作——Banner的自动轮播 获赏10金币 基础教程

β (beta) 普通用户 2019-11-4 2628


效果图

16b426db7d20ad25317b0aaffc083096.gif

Banner的自动轮播在互联网产品中是最常见的,不管是app还是网站首页,都能看到自动轮播的banner,如果我们在我们的产品设计中能把轮播效果做出来,在展示产品设计稿的时候,会显得很高逼格哟。


搬好小板凳,学起来吧


步骤

1.先拽出动态面板命名为banner,调整成合适的大小,添加6个State,分别命名为1-6,把要用的banner图分别拽入1-6。如图:

1a4df42d8e46cc6ec0991d2f5e8b2480.png


2.再拽入一个动态面板放在banner底部的位置命名为轮播点,调整成合适的大小,和上一步一样,添加6个State,分别命名为a-f,a-f里分别添加标记了1-6的6个小圆点,a里的小圆点1为高亮状态2、3、4、5、6为未选择的状态,b里的小圆点2为高亮状态1、3、4、5、6为未选择的状态,同理一致到f,6为高亮状态2、3、4、5、1为未选择的状态。如图:

ccb7f036eca605a9a1a0ecffccc63849.png

这样我们的基础元件就全部摆放好了,下面就要给元件添加交互了。


3.我们先添加banner图片的交互,交互设置如图:

2e42cb8d4af0d4b05a70096be0cbc974.png

载入时就自动播放图片轮播,设置面板动态>选择当前元件>状态选择为“Next”、勾选向后循环、设置循环间隔为3000毫秒、勾选首个状态延时500毫秒后切换、动画效果为逐渐500毫秒。这样就完成了1到6的循环轮播了。效果图:
085680582fed573968183f6366bdc529.gif

接下来我们要实现的是把轮播点也跟图片一样燥起来~


4.哈哈,是的想必聪明的你已经知道接下来的步骤了,我们的轮播点的交互跟上面图片的交互保持一致就行了,这样就可以实现轮播点跟图片轮播速度一致。

d4b867372f1c552915a0880274f0532f.png


好了,让我们再来看一下最终效果图吧~
16b426db7d20ad25317b0aaffc083096.gif

耶!感觉是个很完美的示范呢~


在你的产品原型里加上这个动效吧~让我们一起燥起来


源文件在附件里哦,可以直接下载~


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 10金币
最新回复 (88)
  • Jack888 普通用户 13天前
    0 引用 89
    真不错
  • 茅嘉懿他老子 普通用户 21天前
    0 引用 88
  • zhenzhenyang 普通用户 2月前
    0 引用 87
    感谢分享
  • ccoo 普通用户 5月前
    0 引用 86
    感谢分享
  • Xavier_1594780200 普通用户 7月前
    0 引用 85
    666
  • 芋圆 普通用户 7月前
    0 引用 84
    66
  • 小脚冰凉 普通用户 7月前
    0 引用 83
    感谢分享
  • meihao 普通用户 9月前
    0 引用 82
    感谢分享
  • Shark 普通用户 9月前
    0 引用 81
    好的
  • As_1592357882 普通用户 9月前
    0 引用 80
    感谢
  • ymf963 普通用户 9月前
    0 引用 79
    666
  • 2222 普通用户 10月前
    0 引用 78
    感谢分享~
  • 凤云 普通用户 10月前
    0 引用 77
    感谢分享
  • badia22 普通用户 10月前
    0 引用 76
    感谢分享
  • a5991031 普通用户 10月前
    0 引用 75
    感谢分享
  • _寺司 普通用户 11月前
    0 引用 74
    感谢
  • hlx 普通用户 11月前
    0 引用 73
    666
  • _Ccccch 普通用户 11月前
    0 引用 72
    感谢
  • xuruixing0519 普通用户 11月前
    0 引用 71
    666
  • xuruixing0519 普通用户 11月前
    0 引用 70
    66
  • 刀刀狗 普通用户 11月前
    0 引用 69
    感谢
  • 刀刀狗 普通用户 11月前
    0 引用 68
    感谢
  • piaonopanda 普通用户 11月前
    0 引用 67
    棒感谢分享
  • cavic 普通用户 11月前
    0 引用 66
    感谢分享。
  • A4 普通用户 11月前
    0 引用 65
    666
  • beAst_1588987723 普通用户 11月前
    0 引用 64
    感谢分享
  • 不错 普通用户 11月前
    0 引用 63
    666
  • 15501078789 普通用户 11月前
    0 引用 62
    5666
  • i.zhw 普通用户 2020-4-17
    0 引用 61
    必须点赞
  • ICEJOE 普通用户 2020-4-15
    0 引用 60
    感谢老师
  • yuyu1118 普通用户 2020-4-15
    0 引用 59
    感谢分享
  • 止秋.皮.晚睡 普通用户 2020-4-14
    0 引用 58
    感谢分享
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 57
    666
  • agstarpm 普通用户 2020-4-10
    0 引用 56
    感谢分享
  • 老山贼Klau$ 普通用户 2020-4-10
    0 引用 55
    哇哦
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 54
    感谢分享
  • niujf 普通用户 2020-3-10
    0 引用 53
    THX
  • 天行健楚休红 普通用户 2020-3-6
    0 引用 52
    感谢分享
  • 相遇土司 普通用户 2020-3-6
    0 引用 51
    厉害厉害
  • 晨_1582773554 普通用户 2020-3-2
    0 引用 50
    感谢分享
  • 不错 普通用户 2020-2-29
    0 引用 49
    感谢分享
  • 单单 普通用户 2020-2-28
    0 引用 48
    感谢
  • zhouzhaohan 普通用户 2020-2-25
    0 引用 47
    谢谢
  • 益达_1582524815 普通用户 2020-2-25
    0 引用 46
    感谢
  • 狼人团-果果 普通用户 2020-2-21
    0 引用 45
    感谢
  • PMxuxu 普通用户 2020-2-17
    0 引用 44
    感谢分享!
  • 孙伟伟 Simol 普通用户 2020-2-16
    0 引用 43
    感谢分享 
  • fershair 普通用户 2020-2-16
    0 引用 42
    感谢
  • yunting 普通用户 2020-2-12
    0 引用 41
    感谢
  • 星辰Singa 普通用户 2020-2-11
    0 引用 40
    截图不错,这个游戏蛮好玩的~~
  • hi_bye 普通用户 2020-2-10
    0 引用 39
    感谢分享
  • 见青山 普通用户 2020-2-7
    0 引用 38
    感谢
  • tina. 普通用户 2020-2-6
    0 引用 37
    感谢分享
  • szuzsq 普通用户 2020-2-4
    0 引用 36
    ok,真的好.
  • itwxf 普通用户 2020-1-16
    0 引用 35
    banner轮播
  • 1990feng 普通用户 2020-1-16
    0 引用 34
    666
  • cham_1579138223 普通用户 2020-1-16
    0 引用 33
    感谢分享
  • Cecilia0617 普通用户 2020-1-16
    0 引用 32
    感谢感谢
  • Jameshuang 普通用户 2020-1-11
    0 引用 31
    好啊
  • 577v 普通用户 2020-1-9
    0 引用 30
    谢谢
  • rox 普通用户 2020-1-7
    0 引用 29
    感谢分享
  • 晨曦2020 普通用户 2020-1-7
    0 引用 28
    66
  • 飞天球 普通用户 2019-12-22
    0 引用 27
    6
  • Luffy_1576572699 普通用户 2019-12-20
    1 引用 26
    轮播点这样做反而麻烦了,直接把轮播点放到动态面板1-6里面,轮播点根本不需要做交互,直接跟着图片循环了
  • kai哥 普通用户 2019-12-20
    0 引用 25
    感谢分享
  • 出久 普通用户 2019-12-19
    0 引用 24
  • 菠萝王子 普通用户 2019-12-19
    0 引用 23
    11
  • 减减 普通用户 2019-12-19
    0 引用 22
    感谢分享
  • arielfang0517 普通用户 2019-12-19
    0 引用 21
    谢谢
  • WSJя 普通用户 2019-12-19
    0 引用 20
    感谢分享。
  • Purity 普通用户 2019-12-19
    0 引用 19
    666
  • chenxiao 普通用户 2019-12-9
    0 引用 18
    学习了
  • 吉米 普通用户 2019-12-9
    0 引用 17
    感谢
  • 张_1575856930 普通用户 2019-12-9
    0 引用 16
    感谢分享
  • bigbigm 普通用户 2019-12-7
    0 引用 15
    感谢分享
  • feiing 普通用户 2019-12-2
    0 引用 14
    谢谢
  • 3160906256 普通用户 2019-11-28
    0 引用 13
    感谢分享
  • yydvictor 普通用户 2019-11-27
    0 引用 12
    感谢分享。
  • 智慧视界 普通用户 2019-11-27
    0 引用 11
    感谢分享
  • 12桥明月夜 普通用户 2019-11-26
    0 引用 10
    感谢分享
  • ᴢᴋʜ 普通用户 2019-11-26
    0 引用 9
    6
  • 巴啦啦 普通用户 2019-11-26
    0 引用 8
    下载下载
  • 乌拉咖 普通用户 2019-11-22
    0 引用 7
    感谢分享
  • nepal105 普通用户 2019-11-20
    0 引用 6
    好玩
  • Theresa 普通用户 2019-11-20
    0 引用 5
    thx
  • 玲儿 普通用户 2019-11-19
    0 引用 4
    下载下载
  • β (beta) 普通用户 2019-11-4
    0 引用 3
    黯黄老师 感谢分享。 源文件可以上传到附件,回帖就可以下载。 不要留邮箱的方式,会被群发邮件的收集。 上传附件后会收到金币奖励。
    Soga    好的
  • 黯黄老师 管理员 2019-11-4
    0 引用 2
    感谢分享。
    源文件可以上传到附件,回帖就可以下载。
    不要留邮箱的方式,会被群发邮件的收集。
    上传附件后会收到金币奖励。
返回
axure商城