网站首页

Axure 教程:带放大效果的轮播图

大字 日期:2018-11-09 来源:未知

  提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。

  还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样:

  然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮播图也可以像普通轮播图一样,无限循环。

  初次接触到这个案例的时候,第一感觉就是应该可以实现,但是实现起来会非常复杂,后来经过了多次试验,终于找到了一个最优解。

  其实如果单独考虑第一个问题,很容易解决;如果单独考虑第二个问题,也很容易解决;可两个问题结合起来一起考虑,就需要消耗一些脑细胞了。不知道各位看到这里的时候有没有什么思路。

  对于上面两个问题,我首先考虑的是先解决第一个问题。提到轮播这个词很容易就能想到动态面板,因为网上太多的轮播教程是基于动态面板实现的。于是拿动态面板(的轮播)去套用一下这个案例,发现无论如何都达不到预期效果,最终不得不放弃动态面板。

  放弃使用动态面板就意味着要手动实现左右轮播的效果,通过移动图片来实现,顺便还可以设置图片尺寸,来达到图片放大缩小的效果。这个思路对于解决第一个问题貌似可行(而后来实践证明确实可行)。

  当前能够看到的是图2,图3(放大)和图4,向右轮播之后看到是图1,图2(放大)和图3。此时无法继续向右轮播,更无法循环轮播。

  那么接下就考虑如何实现持续(循环)轮播,在刚才的基础上,我们如果要继续向右轮播的话,应该是像下图这样的情况。

  那么如何在向右轮播后,可以继续向右轮播呢?从上图可以看出来,需要将轮播后最右侧的图片(例中的图片5)放到最左边,这样在继续向右轮播后,才能有图片源源不断的从左边进入画面,从而形成一个循环。

  那么问题来了,如何将最右侧的图片5放到最左边?首先说,采用移动位置的方式是不行的。其实我们也不必线的位置移动到最左边,我们在轮播后(整个图片组发生了位移)只需要将整个图片组复位(位置和大小都要复位)即可,然后再替换掉每个位置上显示的图片。

  图片组复位后,原来图片1的位置显示图5,图片2的位置显示图1,图片3的位置显示图2,图片4的位置显示图3,图片5的位置显示图4。

  同一图片位在轮播的过程中显示的图片是不一样的,比如图片1的位置,可能会在轮播的时候显示为图2,图3,图4,图5等等。所以,要替换显示的图片是不固定的,无法设置一个固定的图片来替换,只能动态去取。

  如果动态去取,必然有一个地方需要存放这些图片,而且根据图片的轮播,存放在每个位置的图片会发生变化。根据这些线索,此时有一个神奇而强大的元件进入我的脑海中——那就是中继器。

  用中继器存放图片1-图片5五个图片,并且按照1-5进行排序,当图片向右轮播时,就把中继器中最后的一个图片排到中继器的第一个位置(通过更新排序字段来实现);相反的,如果图片向左轮播时,就把中继器中第一个位置的图片排到中继器的最后一个位置(通过更新排序字段来实现)。

  至于图片的显示,则在中继器的每项加载时,第1个项目中的图片显示给图片1,第2个项目中的图片显示给图片2,以此类推,第5个项目中的图片显示给图片5。

  将五个图片进行编组(组合),然后将图片组转换为动态面板,调整动态面板中图片组的位置,使第一个图片恰好完整超出画布的左边界。调整动态面板的宽度,使其宽度正好覆盖到第四个图片,这样第五个图片就不可见,如下图。

  在画布中拖入一个中继器,删除掉其默认的矩形框、用例和数据集中的数据,并将其设置为隐藏。将中继器的数据集设置为两列,一列用于存放排序编号(本例中的sortid),一列用于存放图片(本例中的carimg)。将排序编号列依次填充5个数:1,2,3,4,5;将图片列导入5张图片。

  设置中继器的“载入时”用例(将中继器按照sortid升序排列)和“每项加载时”用例(将中继器中的carimg依次显示到五个图片上)。

  ④更新中继器中第一个项目的排序编号(在原来的基础上+中继器的项目数,使其可以排到最后的位置):

  这个案例是春节前一个小伙伴提出的,这段时间一直断断续续的思索着解决方案,但并未动手实践。没有实践并不是因为没有时间,而是一直没有一个完整的思路。近日得来空闲,于是打开Axure亲自动手实验一番,在尝试的过程中,却意外得来灵感,最终轻松搞定。所以,有些事情只凭想是没有结果的。做,兴许能离目标更近一点。

相关新闻

[责任编辑:admin]

中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网版权与免责声明

1、本网转载文字、图片等稿件均出于为公众传播有益资讯信息并且不以盈利为目的,转载稿件不意味着赞同其观点或证实其内容的真实性,本网不对其科学性、严肃性等作任何形式的保证。如其他媒体、网络或个人从本网下载使用须自负版权等法律责任。

2、本网站内凡注明“来源:南昌新闻网”的所有文字、图片和音视频稿件均属本网站原创内容,版权均属“中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网”所有,任何媒体、网站或个人未经本网站协议授权不得转载、链接、转贴或以其他方式复制发表。本网站原创内容版权归本网站所有,内容为作者个人观点,本网站只提供参考并不构成任何商业目的及应用建议。已经由本网站协议授权的媒体、网站,在下载使用时必须注明稿件来源:“中国农业人才网|农资人才网|畜牧人才网|农业招聘|中华农业英才网”,违者本网将依法追究法律责任。

3、凡本网站转载的所有的文章、图片、音频、视频文件等资料的版权归版权所有人所有,本网站采用的非本站原创文章及图片等内容无法一一和版权所有人联系,如果本网所转载稿件的作者或编辑认为其作品不宜上网供大家浏览,或不应无偿使用,请及时用电子邮件或电话通知本网,本网将迅速采取适当措施,避免给双方造成不必要的经济损失。

4、对于已经授权本站独家使用提供给本站资料的版权所有人的文章、图片等资料,如需转载使用,需取得本网站和版权所有人的同意。

< 分享到 设置
+ - 正文字号

点击今日