西门的后花园

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

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就连续不断了,哎…

评论列表

  1. 嗯哼,这个无缝滚动不错呀

  2. 嗯嗯,不错~

  3. 嗯!好东西哟········看看·

  4. 万大哥都说不错,肯定不错~~

  5. 不错。可以推广到文字。

  6. 这个好,,学习了,拿来用用啊。。

  7. 比较喜欢非连续滚动,比较有节奏感

  8. 额~~ 下载下来直接修改都这么麻烦吗

  9. 之前就一直想写个不停顿的无缝滚动..一直没思路..这下好了~ :mrgreen: 回去搞一搞~

  10. 以前怎么没有感觉有这方面的需求

  11. 这个网上有很多,但一旦同时用两个就无效了。

  12. 感觉不连续的有动感。

  13. 这个的确很帅的说,动动更健康,支持!

  14. 我看看给偷来用下

  15. 早说我就给你写一个了,要滚还不容易想怎么滚就怎么滚 🙄

    • 这些玩意儿自己弄才爽啊!话说如果你弄无缝滚动,你会用什么方法?我觉得我这个网上找的方法不怎么好。

  16. 滚动效果很到位。

  17. 滚动代码,网上也挺多的,怎么不找找改改,省时间

  18. 老梁

    很好,用上了。

  19. 我好像用过一个jQuery的插件,忘记叫啥名字了。支持连续滚动和间断滚动的。你这个也收藏了,又多了个方法,呵呵

  20. 滚动代码,网上也挺多的,

  21. 山东响马

    请问怎么让它从左往右滑动呢?

  22. 点点滴滴

    点点滴滴

  23. 发现这个滚动到了css规定的宽度之后就不滚动了。

发表评论

分类目录