仿淘宝轮播原型设计（可自动/手动轮播）
展示效果：[效果一]测试无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
很好，学了了。多谢 我也遇到楼主这个问题，我后来是这么解决的：
1，我使用A面板，专门只执行动作，不做自动轮转
2，我设置B面板，专门做倒计时，并且计时完成后，对条件进行判断，如果没有遇到鼠标干预的时间，就调用A面板，去执行动作。
这样的好处是，不采用滑动动画延迟，是等待一定时间后，动作即时完成的，在做动作之前有判断，那就解决了，鼠标多次干预会多次动作同时执行的问题。不过，我是采用鼠标点击干预，不是移入移出，理论上应该是一样的。 顶顶楼上回帖的 我也遇到楼主这个问题，我后来是这么解决的：
1，我使用A面板，专门只执行动作，不做自动轮转
2，我设置B面板，专门做倒计时，并且计时完成后，对条件进行判断，如果没有遇到鼠标干预的时间，就调用A面板，去执行动 ...
tx911tx 发表于 2011-8-30 14:31 http://www.hiaxure.com/images/common/back.gif
这个是不是把控制面板和自动播放面板分成两个来实现，这个可能会因为各种切换延时出现细小BUG。
我只用了一个动态面板来轮播，但需要用大量的变量来解决延迟判断 求大哥截获，轮播的切换效果在哪里重定？
比如想让广告图片类似翻页形式的轮播 弱弱的问一下，这个能直接用吗？若改变图片大小就不能自动播放了？ 我所有的变量以及设置完全与LZ的相同
为什么不能实现生成页面之后就自动播放，
我必须要触发第一个按钮才能进行自动轮播？ 学习了，很强大啊 收下，谢谢！ 好东西，谢谢楼主 好东西要支持一下 这个支持手机触屏滑动吗？ 需要搞这么复杂吗 已经看不到了 ssssssssss 楼主，地址失效了，还能重新给一个不？？急求~还有说的能在详细些吗 你好 我这个轮播图有2个问题 一个是无法自动轮播只有手动 还有个是图片跳转是1234没有标注的颜色相对应 请问是哪里出了问题呢
演示地址：http://c7rf8t.share.hiaxure.com/
页:
[1]