纯javascript实现四方向文本无缝滚动效果

实现一个文本无缝滚动的效果：
<！DOCTYPE html><！--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <！[endif]--><！--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <！[endif]--><！--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <！[endif]--><！--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <！[endif]--><！--[if （gt IE 9）|！（IE）]><！--> <html lang="zh-CN"> <！--<！[endif]--><head><title>文字滚动</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><style type="text/css">*{margin:0;padding:0;}body{padding:20px;} .textbox{border:1px solid #ddd;width:auto;overflow: hidden;} .textbox ul{list-style: none;position: relative;} .textbox ul li{padding:5px 0;}</style></head><body class="home-page"><div id="textbox" class="textbox"><ul><li>汽车 | 运动B级车降3万5 </li><li>家居 | 这么厉害的装修 女人真的要坐不住了</li><li>教育 | 各省前三报考华工重奖10万元/人</li><li>汽车 | 运动B级车降3万5 平行进口车加价11万</li><li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li><li>数码 | 最新手机报价 说好的宽带降费提速呢？</li><li>汽车 | 平行进口车加价11万</li><li>汽车 | 运动B级车降3万5</li><li>汽车 | 平行进口车加价11万</li><li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li></ul><a href="#" class="btnPrev">向左</a><a href="#" class="btnNext">向右</a></div><br><br><div id="textbox2" class="textbox"><ul><li>汽车 | 运动B级车降3万5 </li><li>家居 | 这么厉害的装修 女人真的要坐不住了</li><li>教育 | 各省前三报考华工重奖10万元/人</li><li>汽车 | 运动B级车降3万5 平行进口车加价11万</li><li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li><li>数码 | 最新手机报价 说好的宽带降费提速呢？</li><li>汽车 | 平行进口车加价11万</li><li>汽车 | 运动B级车降3万5</li><li>汽车 | 平行进口车加价11万</li><li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li></ul><a href="#" class="btnPrev">向上</a><a href="#" class="btnNext">向下</a></div><script type="text/javascript" src="script/jquery-1.11.1.min.js"></script><script type="text/javascript">//四方向无缝滚动scroll（"#textbox",{vis:2,btnHidden:false,dir:"prev",type:"h"}）;scroll（"#textbox2",{vis:3,btnHidden:false,dir:"prev",type:"v"}）;function scroll（container,options）{var box = $（container）;var boxUl = box.find（"ul"）.eq（0）;var LiHeight = 0; //不包含克隆li列表高度var cloneLiHeight = 0; //包含克隆li列表高度var LiWidth = 0; //不包含克隆li列表宽度var cloneLiWidth = 0; //包含克隆li列表宽度var Lis = boxUl.children（）;var btnPrev = box.find（".btnPrev"）;var btnNext = box.find（".btnNext"）;//默认参数var defult= {vis : 2, //显示个数autoPlay:true, //自动播放speed :50, //滚动速度dir:"prev", //滚动方向btnHidden:false, //按钮是否隐藏type:"v" // 水平或者垂直方向};var opt = $.extend（{},defult,options）;//构建DOM结构var lastClone=0; //最后克隆元素var lastCloneHeight=0;//最后克隆元素高度var allCloneHeight=0;//全部克隆元素总高度var lastCloneWidth=0;var allCloneWidth=0;var visHeight=0; //可视高度var visWidth=0;var boxUl_wrap;if（opt.type === "v"）{ //垂直方向Lis.each（function（）{$（this）.height（$（this）.height（））;LiHeight += $（this）.outerHeight（true）;}）;lastClone= boxUl.children（":last"）.clone（）.addClass（"clone"）.prependTo（boxUl）;lastCloneHeight = lastClone.outerHeight（true）;allCloneHeight = lastClone.outerHeight（true）;for（var i = 0; i < opt.vis ; i++）{Lis.eq（i）.clone（）.addClass（"clone"）.appendTo（boxUl）;allCloneHeight += Lis.eq（i）.outerHeight（true）;}visHeight = allCloneHeight - lastCloneHeight;cloneLiHeight = LiHeight + allCloneHeight;boxUl_wrap = $（"<div></div>"）.css（{"width":"100%","height":visHeight,"overflow":"hidden","position":"relative"}）.attr（"id","ulWrap"）;boxUl.css（{"height":cloneLiHeight,"top":-lastCloneHeight}）.wrap（boxUl_wrap）;}else if（opt.type ==="h"）{ //水平方向Lis.css（{"whiteSpace":"nowrap","float":"left","paddingRight":"10px"}）;Lis.each（function（）{$（this）.width（$（this）.width（））;LiWidth += $（this）.outerWidth（true）;}）;lastClone= boxUl.children（":last"）.clone（）.addClass（"clone"）.prependTo（boxUl）;lastCloneWidth= lastClone.outerWidth（true）;allCloneWidth = lastClone.outerWidth（true）;for（var j = 0; j < opt.vis ; j++）{Lis.eq（j）.clone（）.addClass（"clone"）.appendTo（boxUl）;allCloneWidth += Lis.eq（j）.outerWidth（true）;}visHeight = Lis.eq（0）.outerHeight（true）;visWidth = allCloneWidth - lastCloneWidth;cloneLiWidth = LiWidth + allCloneWidth;boxUl_wrap = $（"<div></div>"）.css（{"width":visWidth,"height":visHeight,"overflow":"hidden","position":"relative"}）.attr（"id","ulWrap"）;boxUl.css（{"width":cloneLiWidth,"left":-lastCloneWidth}）.wrap（boxUl_wrap）;box.css（{"width":visWidth}）;}//添加事件处理var timer = null;var scrollTop = function（）{clearInterval（timer）;timer = setInterval（function（）{var tmp = parseInt（boxUl.css（"top"）.replace（"px",""））;tmp--;boxUl.animate（{"top":tmp},0,function（）{if（tmp <= -（LiHeight + lastCloneHeight））{boxUl.css（"top",-lastCloneHeight）;}}）;},opt.speed）;};var scrollDown = function（）{clearInterval（timer）;timer = setInterval（function（）{var tmp = parseInt（boxUl.css（"top"）.replace（"px",""））;tmp++;boxUl.animate（{"top":tmp},0,function（）{if（tmp >= 0）{boxUl.css（"top",-（LiHeight））;}}）;},opt.speed）;};var scrollLeft = function（）{clearInterval（timer）;timer = setInterval（function（）{var tmp = parseInt（boxUl.css（"left"）.replace（"px",""））;tmp--;boxUl.animate（{"left":tmp},0,function（）{if（tmp <= -（LiWidth + lastCloneWidth））{boxUl.css（"left",-（lastCloneWidth））;}}）;},opt.speed）;};var scrollRight = function（）{clearInterval（timer）;timer = setInterval（function（）{var tmp = parseInt（boxUl.css（"left"）.replace（"px",""））;tmp++;boxUl.animate（{"left":tmp},0,function（）{if（tmp >= 0）{boxUl.css（"left",-（LiWidth））;}}）;},opt.speed）;};var scrollType = function（type,dir）{if（Lis.length >= opt.vis）{ //显示个数不能多于列表个数，否则不显示效果var sdir = typeof dir！=="undefined" ? dir : opt.dir;switch（type）{case "v":if（sdir == "prev"）{scrollTop（）;}else{scrollDown（）;}break;case "h":if（sdir == "prev"）{scrollLeft（）;}else{scrollRight（）;}}}};if（opt.autoPlay）{scrollType（opt.type）;}//添加事件处理box.find（"#ulWrap"）.hover（function（）{clearInterval（timer）;},function（）{scrollType（opt.type）;}）;//按钮是否隐藏if（！opt.btnHidden）{btnPrev.unbind（"mouseover"）;btnNext.unbind（"mouseover"）;btnPrev.mouseover（function（）{scrollType（opt.type,"prev"）;}）;btnNext.mouseover（function（）{scrollType（opt.type,"next"）;}）;}else{btnPrev.hide（）;btnNext.hide（）;}}</script></body></html>
一些問題：
本地測試沒問題，但是通過document.write（）把代碼輸入執行后，垂直模式下的li的高度height（）獲取會有問題。原因不明,非常不解..
以上所述就是本文的全部内容了，希望大家能够喜欢。