基于编写jQuery的无缝滚动插件

首先看看html框架，如下所示：

div class=' box ' ul Li 111/Li Li 222/Li Li 333/Li/ul/div简单明了，没什么好说的。

说明实现原理：div框是最外层的框，给它指定宽度和高度，记得给框添加overflow:hidden隐藏样式，因为滚动肯定会超过框。我们用js控制ul标签的边距来实现滚动。水平滚动是为了控制左边距；纵向滚动是为了控制页边距；在初始状态下，我们还需要做有条件的判断，来决定是否要滚。即，当ul长度小于外盒长度时，不执行滚动，否则，执行滚动。ul的长度通过将： ul中单个li的长度乘以li的数量来计算。ul _ width=li _ width * li _ num之所以能实现无缝滚动，是因为每次滚动的长度刚好大于单个li的长度，我们就把ul的第一个li移动到ul的末尾，而且会无限期的进行下去(不用先设置overflow:hidden就可以勾选)。讲一个原理太TM了，考验不了我的表达能力。希望能说清楚。查看插件实现代码：

(函数($) {$。fn。roll=function(options){//将当前上下文对象存储在root var root=this中；//默认配置var设置={speed: 40，//滚动速度，数值越大，速度越慢。方向： 'x' //滚动方向(' x '或' y' [x水平；y纵])}；//如果不为空，则合并if (options)参数$。扩展(设置，选项)；var timer=[]；//timer var跑马灯；//scroller(函数)var isRoll//确定是否滚动(函数)var _ul=$(' ul '，root)；//ul标记var _li=$(' ul li '，root)；//li标签(集)var li _ num=_ li.length////LiN标签数var Li _ first=_ Li . first()；//获取单个li标签//判断是垂直还是水平，如果(设置)则执行相应操作。方向==' x') {var Li _ w=Li _ first。外部宽度(真)；//单个li标签var ul_w=li_w * li_num的宽度；//ul tag _ul.css的宽度({ width : ul _ w })；//设置ul width marquee=function(){ _ ul . animation({ margin left : '-=1 ' }，0，function(){ var _ mleft=math . ABS(par sent($(this))。CSS('左边距'))；如果(_mleft li_w) {//一旦滚动长度大于单个li $ ('li:first '，$ (this))的长度。追加到($(this))；//将第一个li移动到最后一个$(this)。css('左边距'，0)；//滚动长度为0 } })；};//当ul长度小于盒长时，不会滚动，相反会滚动is roll=function(t){ if(ul _ w=root。width())clear interval(t)；else marquee()；} } else { var li_h=li_first .外套高度(true)；//单个li标签var ul_h=li_h * li_num的高度；//ul标签height _ ul . CSS({ height : ul _ h })；//设置ul高度选取框=function () {_ ul。动画({margin top:'-=1'}，0，function(){ var _ mtop=math . ABS(par sent($(this))。CSS('页边距-顶部'))；//取if的绝对值(_ mtopli _ h) {$ ('li:first '，$ (this))。追加到($(this))；$(这个)。css('margin-top '，0)；} });};//当ul长度小于盒长时，不会滚动，相反会滚动is roll=function(t){ if(ul _ h=root。height())clear interval(t)；else marquee()；} }//遵循链式原则，初始化return root.each(函数(i) {//超越内容隐藏，防止用户不写溢出style $ (this)。CSS({溢出： '隐藏' })；timer[I]=setInterval(function(){ isRoll(timer[I])；}，settings . speed)；//输入鼠标停止滚动，离开继续滚动$ (this)。hover(function(){ clearinterval(timer[I])；}，function(){ timer[I]=setInterval(function(){ isRoll(timer[I])；}，settings . speed)；});});};})(jQuery)；基本的代码描述注释写得很清楚。下面解释了各个知识点：

1.)var timer=[]；以前，timer没有声明为数组类型，但是在我写demo的时候，出现了一个bug，因为页面上有两个无缝滚动的应用程序(演示水平和垂直)。

因为两者共用一个定时器，当鼠标进入其中一个时，另一个的定时器就清零了。然后修改代码将其声明为数组对象，然后实现每个插件应用程序都有自己独立的定时器，并且不会通过root.each()相互干扰。也就是说，这个插件同时支持页面上的多个无缝滚动应用。2.)outwidth()/outheight()函数。这个函数更强大，它不仅获取元素的宽度/高度，

实际外部宽度()=宽边框左边框右边框左马林右；当设置为true，即outwidth(true)时，还会计算填充：outwidth()=width边框左边框右边距左马林右填充左填充右；

怎么样，是不是很厉害？

给出了以下演示代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title style type=' text/CSS ' * { margin 33600；划水：0;} ul，ul Li {列表式：无；} .包装{ width :1000 pxmargin :50 px汽车；} .box1、方框2、box 3 { overflow : hiddenfloat : leftborder :1 px纯灰色；} .方框1 {宽度：200 px高度：450 px} .方框1 ul Li {宽度：200 px高度：100 px} .方框2。方框3 {宽度：450 px高度：150 pxmargin:40px}。方框2 ul Li。方框3 ul Li {宽度：100 px高度：150 pxfloat : left }/style/head dydiv class=' wrap ' div class=' box 1 ' ul li111纵向/li li222纵向/li li333纵向/li li444纵向/li li555纵向/li li666纵向/Li/ul/div='框2 ' ul Li 111横向/li li222横向/li li333横向/li li444横向/li li555横向/li li666横向/Li/ul/div class=' box 3 ' ul liul长度小于包厢长度，不滚动/li li222横向/li li333横向/Li/ul/div/div脚本类型=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。类似的。卷轴。js/script脚本类型=' text/JavaScript ' $(function(){//奇数背景设置为灰色$(.1号包厢李：平。2号包厢李：平。3李：号信箱').CSS({背景色： '灰色' })；$(. '方框1 ').滚动({方向： ' y ' })；//设置为纵向滚动$(. '方框2 ').卷轴();//默认横向滚动$(. '方框3 ').卷轴();});/脚本/正文/html效果图片：

演示因为样式问题，大家可以自行美化。