您现在的位置:新闻首页>美图

Axure教程:在动态面板里面设置图片自动/手动切

2018-07-08 08:16编辑:689689689.com人气:


Axure教程:在动态面板里面设置图片自动/手动切换

2018-06-27 15:19 来源:人人都是产品经理

原标题:Axure教程:在动态面板里面设置图片自动/手动切换

本文作者分享自己做过的一个PC端的高保真原型,来教大家,如何在动态面板里面设置图片的自动和手动的切换。

Axure教程:在动态面板里面设置图片自动/手动切

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

Axure教程:在动态面板里面设置图片自动/手动切

案例描述

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

元件准备

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

Axure教程:在动态面板里面设置图片自动/手动切

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

Axure教程:在动态面板里面设置图片自动/手动切

这样大致就做好了,接下我们开始下一步。

思路分析

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

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

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

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

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

Axure教程:在动态面板里面设置图片自动/手动切

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

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

Axure教程:在动态面板里面设置图片自动/手动切

Axure教程:在动态面板里面设置图片自动/手动切

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

Axure教程:在动态面板里面设置图片自动/手动切

完成(已做完的小伙伴给自己鼓个掌)。

总结

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

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

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

今天的分享到此结束了,有任何意见和建议请在下方留言,我会尽快回复您,谢谢 !!

(来源:pk10计划)

织梦二维码生成器
已推荐
0
  • 凡本网注明"来源:的所有作品,版权均属于中,转载请必须注明中,http://www.689689689.com。违反者本网将追究相关法律责任。
  • 本网转载并注明自其它来源的作品,目的在于传递更多信息,并不代表本网赞同其观点或证实其内容的真实性,不承担此类作品侵权行为的直接责任及连带责任。其他媒体、网站或个人从本网转载时,必须保留本网注明的作品来源,并自负版权等法律责任。
  • 如涉及作品内容、版权等问题,请在作品发表之日起一周内与本网联系,否则视为放弃相关权利。






图说新闻

更多>>