西门的后花园

一个热爱网络的年轻人的博客

jQuery滚动图片特效,jQuery无缝滚动图片代码

公司网站要用到jQuery横向滚动图片特效,当时我为了速度,直接找了一段jQuery代码放上去了。缺点有两个:一、主管不满意,他需要的是连续不断的滚动,就是无缝滚动,而不是滚动一张图片,等一下再滚动一张图片;二、代码有个地方浏览器报错,我不知道为什么,但是删了也不行,必须要。

花了好长一段时间,找代码、改代码,终于搞定了上面提到的两个效果:滚动停一下、无缝滚动。感谢群里点拨我的朋友,感谢Google提供信息,感谢网上不知名的朋友提供代码。

jQuery滚动图片(非连续滚动)DEMO

这段代码思路很简单,把ul里的li都浮动左,变成一横排。然后ul往左边animate移动一个图片的宽度,把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法,移开继续调用方法就OK了。

代码我就补贴了,浪费篇幅,直接看上面DEMO的源代码吧。

jQuery无缝滚动图片(连续滚动)DEMO

本来想实现这个效果只需要把上面的setInterval调用方法速度调整成和animate动作一样的速度即可,但是上面的animate往左边移动后,会有个位置变成0的过程。而如果直接都改成一样的,图片就不滚动了,变成直接闪。所以只有网上搜索其他方法。

偶然下载了一个符合我要求的效果,但他是用的table布局,这个还算好改。不知道是不是因为天气的原因,怎么改都不成功,最后还是群里的一位美女帮我改的,只需要在li里再套一层ul、li即可。哎,糟糕的心态呀!

不过这个jQuery代码我不是很懂,虽然开始就有赋值给第二个空的li,但不知道为什么做了个判断,外层的li就连续不断了,哎…

评论已关闭

分类目录