公司网站要用到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就连续不断了,哎…
嗯哼,这个无缝滚动不错呀
:shock路过滴
嗯嗯,不错~
嗯!好东西哟········看看·
万大哥都说不错,肯定不错~~
不错。可以推广到文字。
这个好,,学习了,拿来用用啊。。
比较喜欢非连续滚动,比较有节奏感
额~~ 下载下来直接修改都这么麻烦吗
肯定不会错的··
之前就一直想写个不停顿的无缝滚动..一直没思路..这下好了~
回去搞一搞~
人才啊西门
以前怎么没有感觉有这方面的需求
这个网上有很多,但一旦同时用两个就无效了。
感觉不连续的有动感。
这个的确很帅的说,动动更健康,支持!
我看看给偷来用下
早说我就给你写一个了,要滚还不容易想怎么滚就怎么滚 🙄
这些玩意儿自己弄才爽啊!话说如果你弄无缝滚动,你会用什么方法?我觉得我这个网上找的方法不怎么好。
收藏了
滚动效果很到位。
滚动代码,网上也挺多的,怎么不找找改改,省时间
爸错!
很好,用上了。
我好像用过一个jQuery的插件,忘记叫啥名字了。支持连续滚动和间断滚动的。你这个也收藏了,又多了个方法,呵呵
滚动代码,网上也挺多的,
请问怎么让它从左往右滑动呢?
点点滴滴
发现这个滚动到了css规定的宽度之后就不滚动了。
有没有例子?可以发到jsbin.com里看看
当滚动的内容加起来的宽度小于最外层的宽度时就是这样子(缩小窗口可以滚动,滚动一点之后就停止了)。http://jsbin.com/deneho
以前写的代码考虑不周全,应该写个判断,如果外层宽度大于里面所有item的总宽度,就不要滚动了。