公司网站要用到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就连续不断了,哎…