小白关于走马灯幻灯片的javascript代码分析

<!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" />
<title>无标题文档</title>
<style type="text/css">
<!--
#mydiv1 {
height: 30px;
 300px;
}
-->
</style>
</head>

<body onload="beginmarquee()">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><div id="demo" style="overflow:hidden;200px; height:100px">
<div id="demo1">
<img src="1.jpg" width="200" height="200" />
<img src="2.jpg" width="200" height="200" />
<img src="3.jpg" width="200" height="200" />
<img src="4.jpg" width="200" height="200" />
<img src="5.jpg" width="200" height="200" />
<img src="6.jpg" width="200" height="200" />
</div> 
<div id="demo2"></div> 
</div></td>
<td>&nbsp;</td>
</tr>
</table>
<div id="mydiv1">数据显示</div>
<script language="javascript">
var speed=12
demo2.innerHTML=demo1.innerHTML
mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'demo1的scrollTop'+demo1.scrollTop+'demo2的scrollTop'+demo2.scrollTop

function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++
}
mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'<br>demo1的scrollTop'+demo1.scrollTop+'<br>demo2的scrollTop'+demo2.scrollTop+'<br><br>demo的offsetTop'+demo.offsetTop+'<br>demo1的offsetTop'+demo1.offsetTop+'<br>demo2的offsetTop'+demo2.offsetTop+'<br><br>demo的offsetHeight'+demo.offsetHeight+'<br>demo1的offsetHeight'+demo1.offsetHeight+'<br>demo2的offsetHeight'+demo2.offsetHeight
}

var MyMar
function beginmarquee()
{
MyMar=setInterval(Marquee,speed)
}
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 
</script>
</body>
</html>

demo的scrollTop从0到1200变化
demo1的scrollTop0
demo2的scrollTop0

demo的offsetTop0
demo1的offsetTop0
demo2的offsetTop1200

demo的offsetHeight100
demo1的offsetHeight1200
demo2的offsetHeight1200

scrollTop相当于只对含有嵌套的子元素，带overflow的滚动条的对象有效，是父级的一个属性。只的是子对象溢出父对象上边界的距离。（不用从滚动条理解，从子对象对父对象位置更准确）

offsetTop 这个比较难理解，是对于子对象的概念，如果按字面上理解指 obj 距离上方或上层控件的位置这个不是特别准确，因为在幻灯滚动过程中，其实 offsetTop是没有变的。不如说初始时，该对象距离整体的顶端的距离。或者说子对象距离子对象空间整体的顶端的距离。

offsetHeight就是实际的高度

demo.scrollTop++ 和overflow:hidden  构成了滚动