您好、欢迎来到现金彩票网!
当前位置:老k棋牌 > 载入图片 >

Axure教程:用另一种方式实现轮播图交互

发布时间:2019-06-19 23:10 来源:未知 编辑:admin

  轮播图的实现方式有很多,绝大多数的童鞋也习惯了用堪称“万能”的动态面板去实现。但是,对于一些特殊的轮播图该如何实现更好呢?

  在线D效果的轮播图,多张不同尺寸的图片组合具有视差效果,点击两侧的图片图片将进行位移并且改变大小。选中的图片始终位于中央。话不多说,我们看看如何不用动态面板来实现这种效果。

  当pic1位于位置1和3时,点击pic1,pic1将移动到位置2并且变大,当pic1位于位置2的时候点击不进行交互动作。

  图片的位移在三个固定的点,图片的大小有两个,移动到最中间即位置2的时候最大,两侧大小一样。

  图片需要自动轮播,所以在页面载入的时候我们可以考虑触发图片的鼠标点击事件。这样能实现图片的位移及大小变化。

  鼠标的单击事件能够触发一次事件的执行,无法实现事件循环执行,也就无法实现自动轮播。

  首先判断了pic1的位置是在位置1还是在位置3,(位于位置2时不用位移所以不判断);

  移动pic1到位置2并且尺寸变大,pic2位于位置2,所以将会变小并且位移到位置3;由于pic3处在位置3的位置所以只需要位移到位置1不用改变尺寸。最后标记当前各个图片的位置即:var1=2;var2=3;var3=1。

  移动pic1到位置2,pic1尺寸变大,pic3变小位移到位置1,pic2位移到位置3,最后标记当前各个图片的位置即:var1=2;var2=3;var3=1。

  页面载入时判断图片位置即判断三个变量值,根据不同的位置去触发各图片的鼠标单击事件,实现图片的位移,当执行完再次触发页面载入事件就实现了一个闭环,图片即可自动循环轮播,而整个原型由于变量的应用使得你可以用于任何场景,最多改下变量值,从而大大增强了原型的复用性,扩展性。

  本文由 @HideOnBush 原创发布于人人都是产品经理。未经许可,禁止转载

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://downtownannie.com/zairutupian/78.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有