高人帮忙解释一下这段javascript代码解决方案
日期：2014-05-16 浏览次数：20371 次
高人帮忙解释一下这段javascript代码
网上下的一段代码,实现了<div id="infozone">中的子div中的图片左右及向上滚动,但是俺看得不是很明白,请高人帮忙解释一下,源代码如下:
<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:580px;height:217px;}
#infozone div{height:217px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');
hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,226,0);},17200);
}
function scrollup(o,d,c){
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}
function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w1<=w2)return;
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
function hs(o,d,c,p){
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
<body>
<div id="infozone"><div><img src="image/slide-civil-1.jpg" /></div><div><img src="image/slide-civil-2.jpg" /></div><div><img src="image/slide-env-1.jpg" /></div><div><img src="image/slide-env-2.jpg" /></div></div>
</body>
</html>
------解决方案--------------------
既然机器上有 .net环境，那自己单步调试一下就什么都明白了：
IE7以下:
<script type="text/javascript">
debugger//加这句
var tc;
//.........................
IE8:浏览器自带了调试器
FF: firebug
------解决方案--------------------
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');
hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,226,0);},17200);//这里不建议使用setInterval方法，虽然同为计时器，但是setInterval()是在规定时间内多次调用的执行方法的，在相同时间内对CPU造成的负担比较大，而setTimeout()方法只是调用一次，还是来说说这个函数的意思，首先第一个是清空计数器，重新计时，接着是设置第一个子节点的距离左边的位置，在下来是调用纵向滚动方法，当然，这些函数都是通过计时器来调用，这里就不做仔细解释 }
function scrollup(o,d,c){ //纵向滚动函数
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px'; //这两句的意思就是移除第一个子节点，并且把该子节点完全复制给t，从而给id为infozone的div新加一个节点并设置距上面的距离，总的一句话就是图片复位
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0); //判断总位移量高度是否大于和等于226，如果是的话，l=0;(这里的位移量是3，也就是s，这个函数每50毫秒就调用一次，也就是说c是每50毫秒就+3的位移量，知道最后一次，当总位移量大于活等于226的时候，这时候d=c那么就执行上
网上下的一段代码,实现了<div id="infozone">中的子div中的图片左右及向上滚动,但是俺看得不是很明白,请高人帮忙解释一下,源代码如下:
<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:580px;height:217px;}
#infozone div{height:217px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');
hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,226,0);},17200);
}
function scrollup(o,d,c){
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}
function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w1<=w2)return;
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
function hs(o,d,c,p){
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
<body>
<div id="infozone"><div><img src="image/slide-civil-1.jpg" /></div><div><img src="image/slide-civil-2.jpg" /></div><div><img src="image/slide-env-1.jpg" /></div><div><img src="image/slide-env-2.jpg" /></div></div>
</body>
</html>
------解决方案--------------------
既然机器上有 .net环境，那自己单步调试一下就什么都明白了：
IE7以下:
<script type="text/javascript">
debugger//加这句
var tc;
//.........................
IE8:浏览器自带了调试器
FF: firebug
------解决方案--------------------
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');
hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,226,0);},17200);//这里不建议使用setInterval方法，虽然同为计时器，但是setInterval()是在规定时间内多次调用的执行方法的，在相同时间内对CPU造成的负担比较大，而setTimeout()方法只是调用一次，还是来说说这个函数的意思，首先第一个是清空计数器，重新计时，接着是设置第一个子节点的距离左边的位置，在下来是调用纵向滚动方法，当然，这些函数都是通过计时器来调用，这里就不做仔细解释 }
function scrollup(o,d,c){ //纵向滚动函数
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px'; //这两句的意思就是移除第一个子节点，并且把该子节点完全复制给t，从而给id为infozone的div新加一个节点并设置距上面的距离，总的一句话就是图片复位
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0); //判断总位移量高度是否大于和等于226，如果是的话，l=0;(这里的位移量是3，也就是s，这个函数每50毫秒就调用一次，也就是说c是每50毫秒就+3的位移量，知道最后一次，当总位移量大于活等于226的时候，这时候d=c那么就执行上
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
