JS图片定时翻滚效果实现方法

本文实例讲述了JS图片定时翻滚效果实现方法。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>图片向上翻滚效果</title><style type="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><script language="javascript" type="text/javascript"> var t; window.onload = function（）{var o = document.getElementById（"box"）;t = window.setInterval（function（）{ scrollup（o, 24, 0）;}, 3000） } ///滚动主方法 ///参数:o 滚动块对象 ///参数:d 每次滚屏高度 ///参数:c 当前已滚动高度 function scrollup（o, d, c）{if （d == （c - 78 ）） { var t = 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下会将空格回车作为节点的问题 function getFirstChild（node）{while （node.nodeType ！= 1） { node = node.nextSibling;}return node; }</script> </head> <body>滚动定时效果演示 <hr> <div class="father"> <div id="box"><div class="item"> <img src="../img/head/1.png"/></div><div class="item"> <img src="../img/head/2.png"/></div> <div class="item"> <img src="../img/head/3.png"/></div> <div class="item"> <img src="../img/head/4.png"/></div> </div> </div> </body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。