我的javascript图片切换类系列重大更新

包括XScroll.js,XScroll2.js,XScrollMore.js,其中XScroll2.js已完成更新,其余两个正在处理中。已全部修复完毕,具体可查看各自的示例页。

这次更新是修复bug,而这个bug在我以上三个JS类中都存在(我很抱歉…),由此可见,初期架构是多么重要。XScroll.js是我第一个完成的图片切换类,所以后面两个类或多或少,至少在结构上,都和XScroll.js类似,所以,XScroll.js的毛病,他们也就继承了。。

bug描述(由网友dagai.net提醒):

比如我从第2页跳到第3页,当动画正在进行时,我又回到第2页(或跳到第4页),这时候,便会发生多个动画效果同时进行的bug,也就是,既在进行2到3的动画,又在进行3到2的动画。

原因很简单:在下一次动画前没有清除上次动画的定时器。

本来理想上的实现方式是:我从2跳到3,动画正在进行中,又从3跳到2,此时,动画就应该往回滚了。如果又跳到4,那2到3的动画就应该马上中止,开始3到4的动画了。

但我的JS类中只有一个定时器timer,这个timer主管整个自动切换进程,也就是是否循环跳转。动画进程却没有保存定时器,只是简单的setTimeout,于是这个动画就没法中止了。

所以,我增加了一个管理动画进程的定时器,只要清除这个定时器,动画就不动了,哪怕只进行到一半。这个定时器就叫_timer吧,在源码里可以看到。

虽然多了一个定时器,但代码量并没有增加多少,效率也应该没影响,可放心使用。

图片切换分为自动切换和手动触发。手动触发,一般就是鼠标指到页码上面,决定切换到哪一张,手动触发时,会马上中止当前动画进程,并判断跳转条件,进行下一次跳转,该回滚就回滚,该去下一个就去下一个。

XScroll2.js经过修复,好像已经没有什么bug了,欢迎各位使用,测试及反馈,毕竟,要靠我一个人来完成调试,真是压力山大的。。

4 评论

  1. 很感谢十年灯大侠开发出这么好用的JS插件,但是这个插件能不能用在wordpress呢,如果能用又怎么用呢?还有在你的网站都不见有下载的,是不是要收费的?请指教,严重感谢!我的邮箱是qjinq12345@tom.com

  2. 期待你更完善,触发动作希望能加入延时,如果你鼠标从1掠过234到5,234的动画全触发了,虽然你在掠过后清除了前一个动画,但还是触发了不是?
    我记得以前在看锋利的jquery的时候,其中有个例子就讲到这个,好久没接触过忘了,不过你可以看淘宝首页最上面那个广告,鼠标稍微动快点都不会触发的

发表评论

电子邮件地址不会被公开。