Axure教程:动态面板自动/手动轮播 获赏10金币 案例教程 基础教程

Donny 普通用户 2019-12-6 3083

给大家分享自己做过的一个案例,来自于之前做过的一个PC端高保真原型。




案例描述

固定区域循环一组图片(幻灯片效果),条形分页标签随着播放不同的图片,而对应改变样式。


准备元件

从元件库中拖出一个动态面板,我们给它命名为 Banner ,里面同样添加1+N个状态,每个状态里放同样大小的图片(记得位置要统一)。




同样的条形标签我们按照上面的做一下,第一个状态的第一个为选中,往下递增下去。( 这方法可能有点蠢,但设置交互属性的时候比较方便,其中也包含了个人习惯 )。




这样大致就做好前面的步骤,准备下一步。


思路分析

1、利用动态面板可添加多个状态的特性,我创建了 6 个状态;

2、将 6 张图需要展示的图片放到各个状态里面;

3、将条形标签做成只能唯一被选中的效果( 第一个状态的第一个为选中 ),其他状态递增下去;

4、页面打开后,开启图片( 载入时 )自动循环播放的效果,且每次切换新的图片时,同时切换不同的条形标签状态。


思路基本完善后,下面我们来做一下这个效果。




Banner 动态面板设置为之后,条形标签同样设置。这时候我们就能实现出图片自动切换的效果了,接下来我们可以继续优化交互体验 ~

我们给Banner的两侧各加一个可点击的按钮,点击左侧按钮( 向前一个状态 ),点击右侧按钮( 向后一个状态 )。






最后我们加一个鼠标移入移出的交互效果,如图:




完成。


总结

1、实现图片 or 条形标签自动切换;

2、实现鼠标移入时停止自动切换,移出即可回复自动切换;

3、实现点击两侧按钮可手动切换。


分享到此结束了,已添加教程文件。有任何意见和建议请在下方留言,我会尽快回复。


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (23)
  • 沈十三 管理员 2019-12-6
    0 引用 2
    感谢分享,已获得10金币奖励!
  • fuhue 普通用户 2019-12-6
    0 引用 3
    感谢分享
  • Aurora.Cc 普通用户 2019-12-7
    0 引用 4
    蟹蟹
  • kevin1981 普通用户 2019-12-17
    0 引用 5
    感谢分享
  • Fly_1576550209 普通用户 2019-12-17
    0 引用 6
    谢谢
  • nanguaboss 普通用户 2019-12-24
    0 引用 7
    感谢分享看看思路。
  • xuruixing0519 普通用户 2019-12-24
    0 引用 8
    666
  • 晨曦2020 普通用户 2020-1-4
    0 引用 9
    66
  • cyou 普通用户 2020-1-4
    0 引用 10
    666  感谢分享
  • 林青霞 普通用户 2020-1-8
    0 引用 11
    感谢分享,已获得10金币奖励!
  • ZZH 普通用户 2020-1-21
    0 引用 12
    感谢分享
  • szuzsq 普通用户 2020-2-4
    0 引用 13
    ok,真的很好.
  • Karen321 普通用户 2020-2-13
    0 引用 14
    谢谢
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 15
    66
  • G小健 普通用户 2020-4-21
    0 引用 16
    感谢
  • 安风 普通用户 2020-5-21
    0 引用 17
    6
  • Mr鲷 普通用户 2020-5-28
    0 引用 18
    谢谢分享
  • 张一 普通用户 2020-6-1
    0 引用 19
    谢谢
  • 汪富贵儿 普通用户 2020-9-28
    0 引用 20
    感谢分享
  • 溪风丨微雨轻尘 普通用户 2021-5-18
    0 引用 21
    感谢分享
  • 告辞 普通用户 2021-5-21
    0 引用 22
    66
  • niwasama 普通用户 2021-8-25
    0 引用 23
    感谢分享
  • A 我站会 普通用户 2021-9-3
    0 引用 24
    1
返回