//-----------------------不同的是使用了offsetTop和offsetHeight完成竖着的无缝图片滚动
<html>
<head><title>rollVertical</title></head>
<style type="text/css">
body,img,li,div,ul{margin: 0px;padding: 0px;}
img{width: 130px;height: 150px;}
#upBtn{width: 40px;height: 40px;margin-top: 5px;margin-bottom: 5px;}
#downBtn{width: 40px;height: 40px;top: 490px;position: relative;}
li{list-style: none;float: left;margin: 10px 10px 0px 10px;}
#board{height: 480px;position: absolute;width: 150px;overflow: hidden;}
#picBody{position: absolute;}
#box{width: 150px;height: 590px;background: pink;margin: 20px auto;text-align: center;}
</style>
<script type="text/javascript">
window.onload=function(){
var timer;
oPicBody=document.getElementById('picBody');
oBtn=document.getElementsByTagName('input');
oImg=document.getElementsByTagName('img');
oPicBody.innerHTML+=oPicBody.innerHTML;
oPicBody.style.height=(oImg[0].offsetHeight+10)*oImg.length+'px';
oBtn[0].onmouseover=function(){
timer=setInterval(function(){
oPicBody.style.top=(oPicBody.offsetTop-5)+'px';
if(oPicBody.offsetTop<(-oPicBody.offsetHeight/2)) oPicBody.style.top=0+'px';
},30)
}
oBtn[0].onmouseout=oBtn[1].onmouseout=function(){
clearInterval(timer);
}
oBtn[1].onmouseover=function(){
timer=setInterval(function(){
oPicBody.style.top=(oPicBody.offsetTop+5)+'px';
if(oPicBody.offsetTop>0) oPicBody.style.top=-oPicBody.offsetHeight/2+'px';
},30)
}
}
</script>
<body>
<div id="box">
<input type="image" src="pic/rollUp.png" id="upBtn">
<div id="board">
<ul id="picBody">
<li><img src="pic/pic1.jpg"></li>
<li><img src="pic/pic2.jpg"></li>
<li><img src="pic/pic3.jpg"></li>
<li><img src="pic/pic4.jpg"></li>
</ul>
</div>
<div></div>
<input type="image" src="pic/rollDown.png" id="downBtn">
</div>
</body>
</html>
