无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.roll{position: relative;}
.wrap ul{position: absolute; left: 0px; top: 0px; }
.wrap ul li{}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('roll');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
/*
//一直向右滚动
setInterval(function(){
oUl.style.left=oUl.offsetLeft+5+'px';

if(oUl.offsetLeft>oUl.offsetWidth/2){
oUl.style.left='0px';
}
},30);

//一直向左滚动
setInterval(function(){
oUl.style.left=oUl.offsetLeft-5+'px';

if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}
},30);
*/

//上下无缝滚动

setInterval(function(){
oUl.style.top=oUl.offsetTop+5+'px';

if(oUl.offsetTop <= - oUl.offsetHeight / 2){
oUl.style.top = '0';
}else if(oUl.offsetTop >= 0){
oUl.style.top = - oUl.offsetHeight / 2 + 'px';
};

},300);
//主要利用offsetLeft或offsetTop求得左边或上下的距离然后复制一份原来的走到一半的时候拉过来进而在视觉上产生滚动的效果

}
</script>
</head>
<body>
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn_left"></a>
<a href="javascript:void(0);" class="btn_right"></a>