|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery插件，无缝滚动</title> <style type="text/css"> #tpxsroll { width:320px; height:220px; overflow:hidden; border:#CCCCCC 5px solid;} #tpxsroll ul { width:5000px;} #tpxsroll ul, #tpxsroll li { margin:0; padding:0; list-style:none;} #tpxsroll li { width:300px; height:200px; border:1px solid #000; text-align:center; float:left; margin:5px;} </style> </head> <body> <div id="tpxsroll"> <ul> <li><a href="#"><img src="http://www.baidu.com/img/bdlogo.gif"/><p>1百度LOGO</p></a></li> <li><a href="#"><img src="http://www.baidu.com/img/bdlogo.gif"/><p>2百度LOGO</p></a></li> <li><a href="#"><img src="http://www.baidu.com/img/bdlogo.gif"/><p>3百度LOGO</p></a></li> <li><a href="#"><img src="http://www.baidu.com/img/bdlogo.gif"/><p>4百度LOGO</p></a></li> <li><a href="#"><img src="http://www.baidu.com/img/bdlogo.gif"/><p>5百度LOGO</p></a></li> </ul> </div> </body> <script language="javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script language="javascript"> /* 名称：图片滚动无缝插件，jquery扩展 * 作者: http://www. * 说明：执行：$obj.pic_scroll()，div > ul > li 方式嵌套，只支持left、up两种参数 * 使用方法：pic_scroll('left', 20)，第一个参数方向，第二个间隔毫秒数，也就是速度。 */ (function(){jQuery.fn.extend({pic_scroll:function(a,b){var c=$(this);var d=c.find("ul");var e=d.find("li");if(b==undefined){b=20};if(a=='up'){var f=e.size()*(e.height()+parseInt(e.css('marginTop'))+parseInt(e.css('marginBottom')));e.clone().prependTo(d);d.height(2*h+20);var g=1,h;c.hover(function(){g=0},function(){g=1});setInterval(function(){h=c.scrollTop();if(h<f){c.scrollTop(h+g)}else{c.scrollTop(0)}},b)};if(a=='left'){var f=e.size()*(e.width()+parseInt(e.css('marginLeft'))+parseInt(e.css('marginRight')));e.clone().prependTo(d);d.width(2*f+20);var g=1,h;c.hover(function(){g=0},function(){g=1});setInterval(function(){h=c.scrollLeft();if(h<f){c.scrollLeft(h+g)}else{c.scrollLeft(0)}},b)}}})})($); $(function(){ $('#tpxsroll').pic_scroll('left', 20); }) </script> </html> |
|
|
