jquery无缝隙连续滚动代码
//以下代码复制到JS文件中调用 $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" }; o = $.extend(defaults, o); return this.each(function(){ var _li = $("li", this); _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul _li.css({position: "relative", overflow: "hidden"}); //li if(o.dir == "left") _li.css({float: "left"}); //初始大小 var _li_size = 0; for(var i=0; i<_li.size(); i++) _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true); //循环所需要的元素 if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li = $("li", this); //滚动 var _li_scroll = 0; function goto(){ _li_scroll += o.width; if(_li_scroll > _li_size) { _li_scroll = 0; _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }); _li_scroll += o.width; } _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount); } //开始 var move = setInterval(function(){ goto(); }, o.speed); _li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move = setInterval(function(){ goto(); }, o.speed); }); }); }; $(document).ready(function(){ //这里设置DIV层的样式名 $("#gdtw").imgscroll({ speed: 40, //图片滚动速度 amount: 0, //图片滚动过渡时间 width: 1, //图片滚动步数 dir: "left" // "left" 或 "up" 向左或向上滚动 }); });
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/web/537.html
- 上篇文章:其实百度云看电影很给力的
- 下篇文章:蓝叶分享58张精美风景壁纸合集打包下载

发2018-08-01 15:54回复
#6
点击li的事件 怎么触发呢

蓝叶2018-08-03 22:29回复
@发:图片加a标签链接

海棠秋客2013-10-25 10:18回复
#5
学到,顶一个

阿勇博客2013-10-09 19:04回复
#4
虽然用不上,但是多谢分享啊

李明2013-09-26 00:56回复
#3
这代码真的比html标签marquee更完美。

免费空间2013-09-15 13:37回复
#2
就是了。写得不错的。哈。

魑魅魍魉2013-09-14 14:05回复
#1
好像不错的样子