這一周還學習了BOM我已經被BOM和DOM搞得神志不清了，先説説BOM的簡捷吧：
这是浏览器运行时中的两个不同的概念。
BOM 浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）
DOM 文档对象模型
DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。
特定语言的DOM
针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。
我們用Bom做了移動DIV，輪播，著是輪播的代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 800px;
height: 600px;
/*border: 1px solid gray;*/
margin: 0 auto;
overflow: hidden;
position: relative;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/1.jpg" width="800"/>
<img src="img/2.jpg" width="800"/>
<img src="img/3.jpg" width="800"/>
<img src="img/4.jpg" width="800"/>
<img src="img/5.jpg" width="800"/>
<img src="img/6.jpg" width="800"/>
<img src="img/7.jpg" width="800"/>
</div>
<div id="div2"></div>
<script>
var div1 = document.getElementById(‘div1‘);
var div2 = document.getElementById(‘div2‘);
var imgs = div1.getElementsByTagName(‘img‘);
window.onload=function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = i*800+‘px‘;
}
};
function imgMove(){
// div2.innerHTML="";
var bl = true;
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = imgs[i].offsetLeft-1+‘px‘;
// div2.innerHTML+=imgs[i].offsetLeft+",,";
if(imgs[i].offsetLeft==0){
bl = false;
if(i==0)
imgs[imgs.length-1].style.left=(imgs.length-1)*800+1+‘px‘;
else
imgs[i-1].style.left=(imgs.length-1)*800+1+‘px‘;
}
}
if(bl)
setTimeout(imgMove, 10);
else
setTimeout(imgMove, 1000);
}
setTimeout(imgMove, 1000);
</script>
</body>
</html>
原文：http://www.cnblogs.com/zeishao/p/6536084.html