西门的后花园

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

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

评论列表

万戈

回复

2011/04/27 at 07:15

嗯哼，这个无缝滚动不错呀
老大网络

回复

2011/04/27 at 09:12

:shock路过滴
林木木

回复

2011/04/27 at 09:30

嗯嗯，不错～
美女图片

回复

2011/04/27 at 10:40

嗯！好东西哟········看看·
IM路人

回复

2011/04/27 at 15:11

万大哥都说不错，肯定不错~~
wmtimes

回复

2011/04/28 at 02:49

不错。可以推广到文字。
安卓汇

回复

2011/04/28 at 14:06

这个好，，学习了，拿来用用啊。。
A.shun

回复

2011/04/28 at 14:32

比较喜欢非连续滚动，比较有节奏感
集趣

回复

2011/04/29 at 11:53

额~~ 下载下来直接修改都这么麻烦吗
性感美女写真

回复

2011/04/29 at 15:36

肯定不会错的··
ADD~``

回复

2011/04/30 at 13:29

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

回复

2011/04/30 at 22:31

人才啊西门
天津网站优化

回复

2011/05/01 at 13:59

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

回复

2011/05/02 at 12:04

这个网上有很多，但一旦同时用两个就无效了。
OneDou

回复

2011/05/03 at 20:16

感觉不连续的有动感。
立青

回复

2011/05/04 at 14:08

这个的确很帅的说，动动更健康，支持！
西风

回复

2011/05/04 at 18:38

我看看给偷来用下
N

回复

2011/05/05 at 11:33

早说我就给你写一个了，要滚还不容易想怎么滚就怎么滚 🙄
- 西门
  
  回复
  
  2011/05/05 at 23:43
  
  这些玩意儿自己弄才爽啊！话说如果你弄无缝滚动，你会用什么方法？我觉得我这个网上找的方法不怎么好。
piwu

回复

2011/05/05 at 23:29

收藏了
番茄

回复

2011/05/06 at 15:12

滚动效果很到位。
西洋参

回复

2011/05/31 at 22:36

滚动代码，网上也挺多的，怎么不找找改改，省时间
LICB 博客

回复

2011/06/14 at 16:35

爸错！
老梁

回复

2011/08/23 at 12:22

很好，用上了。
Jucelin

回复

2011/12/20 at 14:38

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

回复

2012/04/08 at 12:50

滚动代码，网上也挺多的，
山东响马

回复

2013/04/16 at 14:51

请问怎么让它从左往右滑动呢？
点点滴滴

回复

2013/04/24 at 09:16

点点滴滴
蔡宝坚

回复

2014/10/20 at 17:23

发现这个滚动到了css规定的宽度之后就不滚动了。
- 西门
  
  回复
  
  2014/10/20 at 21:20
  
  有没有例子？可以发到jsbin.com里看看
  - 蔡宝坚
    
    回复
    
    2014/10/22 at 13:59
    
    当滚动的内容加起来的宽度小于最外层的宽度时就是这样子(缩小窗口可以滚动，滚动一点之后就停止了)。http://jsbin.com/deneho
    - 西门
      
      回复
      
      2014/10/23 at 09:55
      
      以前写的代码考虑不周全，应该写个判断，如果外层宽度大于里面所有item的总宽度，就不要滚动了。

发表评论取消回复