javascript实现的上下无缝滚动效果
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下：
前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是offsetTop的值，并且不需要计算ul整体的宽度了。
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>无缝滚动——上下</title>
<styletype="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
img{border:0;}
#scroll{width:178px;margin:50pxauto;position:relative;}
.btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
.up{background:url(images/up.gif);}
.down{background:url(images/down.gif);}
.content{margin:10px0;height:440px;overflow:hidden;position:relative;}
.contentul{position:absolute;top:0;left:0;}
.contentli{height:110px;}
</style>
</head>
<body>
<divid="scroll">
<ahref="javascript:;"id="up"class="btnup"></a>
<divclass="content">
<ul>
<li><ahref="#"title="111"><imgsrc="images/1.jpg"alt="111"width="178"height="108"/></a></li>
<li><ahref="#"title="222"><imgsrc="images/2.jpg"alt="222"width="178"height="108"/></a></li>
<li><ahref="#"title="333"><imgsrc="images/3.jpg"alt="333"width="178"height="108"/></a></li>
<li><ahref="#"title="444"><imgsrc="images/4.jpg"alt="444"width="178"height="108"/></a></li>
</ul>
</div>
<aclass="btndown"href="javascript:;"id="down"></a>
</div>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
varoDiv=document.getElementById('scroll');
varbtnUp=document.getElementById('up');
varbtnDown=document.getElementById('down');
varoUl=oDiv.getElementsByTagName('ul')[0];
vartimer=null;
varspeed=-1;
oUl.innerHTML+=oUl.innerHTML;
setTimeout(move,1500);
btnUp.onclick=function(){
clearInterval(timer);
speed=-1;
move();
};
btnDown.onclick=function(){
clearInterval(timer);
speed=1;
move();
};
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
move();
};
functionmove(){
timer=setInterval(function(){
oUl.style.top=oUl.offsetTop+speed+'px';
if(oUl.offsetTop<=-oUl.offsetHeight/2){
oUl.style.top='0';
}elseif(oUl.offsetTop>=0){
oUl.style.top=-oUl.offsetHeight/2+'px';
};
},30);
};
};
</script>
如果要改变移动速度，修改speed的值即可，初始默认为向上移动，即速度为负数。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。