无缝滚动
<!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>
<div class="wrap">
<ul>
<li><img src="" width="100" height="100" /></li>
<li><img src="" width="100" height="100" /></li>
<li><img src="" width="100" height="100" /></li>
<li><img src="" width="100" height="100" /></li>
</ul>
</div>
</div>
</body>
</html>
