JS图片定时翻滚效果实现方法
本文实例讲述了JS图片定时翻滚效果实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=7"/>
<title>图片向上翻滚效果</title>
<styletype="text/css">
.father{
position:relative;
overflow:hidden;
height:100px;
width:300px;
}
.box{
float:left;
font-size:12px;
width:80px;
height:120px;
overflow:hidden;
position:absolute;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
vart;
window.onload=function(){
varo=document.getElementById('box');
t=window.setInterval(function(){
scrollup(o,24,0);
},3000)
}
///滚动主方法
///参数:o滚动块对象
///参数:d每次滚屏高度
///参数:c当前已滚动高度
functionscrollup(o,d,c){
if(d==(c-78)){
vart=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}
else{
c+=1;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){
scrollup(o,d,c)
},15);
}
}
//解决firefox下会将空格回车作为节点的问题
functiongetFirstChild(node){
while(node.nodeType!=1){
node=node.nextSibling;
}
returnnode;
}
</script>
</head>
<body>
滚动定时效果演示
<hr>
<divclass="father">
<divid="box">
<divclass="item">
<imgsrc="../img/head/1.png"/>
</div>
<divclass="item">
<imgsrc="../img/head/2.png"/>
</div>
<divclass="item">
<imgsrc="../img/head/3.png"/>
</div>
<divclass="item">
<imgsrc="../img/head/4.png"/>
</div>
</div>
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。