jQuery插件实现无缝滚动效果

让我们先看看html框架，如下所示：

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的最后一个Li，而且会无限期的进行下去(你可以不设置overflow:hidden就勾选这个)。

插件的实现代码：

(函数($) {$。fn。scroll=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标签宽度_ 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长度小于box长度，则不会滚动，相反会滚动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 height marquee=function(){ _ ul . animation({ 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长度小于box长度，则不会滚动，相反会滚动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)、外部宽度()/外部高度()函数。这个函数比较强大，它获取的不仅仅是元素的宽度/高度，实际上out width()=width borderRight borderRight margin ft marin right；当它设置为真实的后，即：外部宽度（真),它也会将填料计算进来：outwidth()=width borderRight边距左马林右填充左填充右；

下面给出演示代码：

！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效果图片：

以上就是jQuery插件实现无缝滚动特效，效果实现有些简陋，不是很美观，但是方法是正确的，希望大家自己在此基础上进行美化。