|
展示效果:[效果一]测试无BUG版本[无轮换动画]
http://rnv8e4.share.hiaxure.com/
[效果二]轮换动画版本[不可过快滑过几个轮播控制按钮。由于轮换时500ms的动画而存在的BUG,尚未想到办法解决]
http://p5faos.share.hiaxure.com/
制作要领:
1、自动播放的实现。
用了Axure6中动态面板OnShow事件。即先Hide动态面板,再Show动态面板,以重复Show的事件,实现循环。
参考了几个类似的轮播,发现都是采用两个动态面板,分别控制自动和手动播放。此套轮播,只采用了一个动态面板控制轮播。
自动播放的实现,简单的做法是一次Show,完所有所有轮播播放后,重新Show次就可以了。
但为了实现手动的控制,我这里针对每个轮播都需要Show一次,Show的时候判断两个情况:
(1)是不是有鼠标指向,可设置变量over=0表示无鼠标指向,over=1鼠标指向中;
(2)上一个轮播图的位置在哪。可设置变量position,记录数值0~4表示轮播图位置1~5。
当判断无鼠标指向时,根据上一个轮播位置,来控制本次Show控制哪张图片显示出来,以实现自动轮播。
2、手动播放的实现。
在轮播控制按钮的OnMouseEnter上增加事件,并记录下两个变量。
(1)记录鼠标指向中,即变量over=1;
(2)目前的轮播位置,即变量position为目前轮播图的位置。
并在轮播控制按牛的OnMouseOut上增加事件。
(1)记录鼠标无指向,即变量over=0;
(2)Hide并Show轮播,让轮播能继续自动播放
3、延时的控制。
由于自动播放和操作两个控制存在,在不同延迟并Show的时候,会出现延时时间内多次Show的BUG,为解决此问题,借助一个空白动态面板来统一控制延时并Hide&Show轮播动态面板。
在每个控制延时的位置,增加一个控制变量delay,当此控件的事件除法时,delay=0,当延时完成后,delay=1。之后触发空白动态面板进行判断并Hide&Show轮播动态面板。
空白动态面板被触发后,判断是不是所有延时都已完成。如都完成,则可以Hide&Show轮播动态面板,否则不做任何操作。
感觉这个方法比较罗嗦,但有想不到其他更好的方法实现。如果有什么更好的建议和意见可以联系我。Email:robrov#163.com(#换成@,谢谢)
通过以上三点,就可以制作出上面所演示的轮播图了。
转自:泥鳅工作室
原帖:http://blog.1ued.com/?p=156
|
|