<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="//www.baidu.com/img/bdlogo.gif"/><p>1百度LOGO</p></a></li>
<li><a href="#"><img src="//www.baidu.com/img/bdlogo.gif"/><p>2百度LOGO</p></a></li>
<li><a href="#"><img src="//www.baidu.com/img/bdlogo.gif"/><p>3百度LOGO</p></a></li>
<li><a href="#"><img src="//www.baidu.com/img/bdlogo.gif"/><p>4百度LOGO</p></a></li>
<li><a href="#"><img src="//www.baidu.com/img/bdlogo.gif"/><p>5百度LOGO</p></a></li>
</ul>
</div>
</body>
<script language="javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript">
/* 名称：图片滚动无缝插件，jquery扩展
* 作者: http://www.igooda.cn
* 说明：执行：$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>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
