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

Donny 普通用户 5月前 1137

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




案例描述

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


准备元件

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




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




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


思路分析

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

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

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

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


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




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

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






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




完成。


总结

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

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

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


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


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (17)
  • Mr鲷 普通用户 1天前
    0 引用 18
    谢谢分享
  • 安风 普通用户 8天前
    0 引用 17
    6
  • G小健 普通用户 1月前
    0 引用 16
    感谢
  • Demon_1586777772 普通用户 1月前
    0 引用 15
    66
  • Karen321 普通用户 3月前
    0 引用 14
    谢谢
  • szuzsq 普通用户 3月前
    0 引用 13
    ok,真的很好.
  • ZZH 普通用户 4月前
    0 引用 12
    感谢分享
  • 林青霞 普通用户 4月前
    0 引用 11
    感谢分享,已获得10金币奖励!
  • cyou 普通用户 4月前
    0 引用 10
    666  感谢分享
  • 晨曦2020 普通用户 4月前
    0 引用 9
    66
  • xuruixing0519 普通用户 5月前
    0 引用 8
    666
  • nanguaboss 普通用户 5月前
    0 引用 7
    感谢分享看看思路。
  • Fly_1576550209 普通用户 5月前
    0 引用 6
    谢谢
  • kevin1981 普通用户 5月前
    0 引用 5
    感谢分享
  • Aurora.Cc 普通用户 5月前
    0 引用 4
    蟹蟹
  • fuhue 普通用户 5月前
    0 引用 3
    感谢分享
  • 沈十三 管理员 5月前
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城