<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0px;}
ul li{list-style-type: none;}
#content{width:100px;height:200px;position:relative;margin: 10px auto;overflow: hidden;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}
#div1{position: absolute;top: 0px;left: 0px;}
#div1 li{float: left;display: block;}
#div1 li>img{width:100px;}
.btn{width:50px; height:50px;color:#fff;text-align:center; line-height:50px; border:1px solid black;float: left;margin:10px; border-radius: 10px;background: #1BB9E8;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}
#content:hover{
-webkit-transform:translate(10px，10px);
transform:translate(10px,10px);
-moz-box-shadow: 0px 0px 5px #888888; /* 老的 Firefox */
box-shadow: 0px 0px 5px #888888;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('content');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var oUp=document.getElementById('btn1');
var oDown=document.getElementById('btn2');
var timer=null;
var iSpeed=0;
oUl.innerHTML+=oUl.innerHTML;
oUp.onmousedown=function(){
timer=setInterval(doMove,30);
iSpeed=-2;
oUp.style.cssText="-webkit-transform:translate(10px，10px);transform:translate(10px,10px);-moz-box-shadow: 0px 0px 5px #888888;box-shadow: 0px 0px 5px #888888;"
}
oUp.onmouseup=function(){
clearInterval(timer);
oUp.style.cssText="-webkit-transform:translate(0px，0px);transform:translate(0px,0px);-moz-box-shadow: 10px 10px 5px #888888;box-shadow: 10px 10px 5px #888888;"
}
oDown.onmousedown=function(){
timer=setInterval(doMove,30);
iSpeed=2;
oDown.style.cssText="-webkit-transform:translate(10px，10px);transform:translate(10px,10px);-moz-box-shadow: 0px 0px 5px #888888;box-shadow: 0px 0px 5px #888888;"
}
oDown.onmouseup=function(){
clearInterval(timer);
oDown.style.cssText="-webkit-transform:translate(0px，0px);transform:translate(0px,0px);-moz-box-shadow: 10px 10px 5px #888888;box-shadow: 10px 10px 5px #888888;"
}
function doMove(){
oUl.style.top=oUl.offsetTop+iSpeed+'px';
if(oUl.offsetTop<-oUl.offsetHeight/2){
oUl.style.top='0px';
}else if(oUl.offsetTop>0){
oUl.style.top=-oUl.offsetHeight/2+'px';
}
}
oDiv.onmouseover=function(){
timer=setInterval(doMove,30);
iSpeed=2;
}
oDiv.onmouseout=function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<div id="content">
<ul id="div1">
<li><img src="img/0.png"></li>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
</ul>
</div>
<div class="btn btn1" id='btn1'>↑</div>
<div class="btn btn2" id='btn2'>↓</div>
</body>
</html>
查看范例
