|
|
展示效果：[效果一]测试无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
|
|
发表于 2011-4-7 11:15:43
楼主
