JavaScript基础应用 制作无缝滚动图实例与DOM基础知识讲解

在制作无缝滚动图之前需要了解JavaScript里面的offset系列属性设置。

位置、宽高属性：offset系列

offset系列包括以下五项：

offsetParent

offsetWidth

offsetHeight

offsetTop

offsetLeft

offsetWidth是元素的可视宽度，包括元素的边框、水平padding、垂直滚动条、元素本身宽度。

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight是元素的可视高度，包括元素的边框、垂直padding、水平滚动条、元素本身高度。

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft是返回元素边界左上角顶点相对于offsetParent边界左上角顶点的水平偏移量。

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

offsetTop是返回元素边界左上角顶点相对于offsetParent边界左上角顶点的水平偏移量。

ffsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

如何制作无缝滚动图

1、页面的布局：首先，给页面设置一个div，用于装所要滚动的图片，在div里面用li标签装要滚动的多个图片，div的宽度为图片的总宽度。为了给图片使用offset属性，此处的div和ul标签要分别设置相对定位与绝对定位属性，并且要给div设置overflow：hidden属性。li标签里面的图片要设置左浮动属性。

<div id="box">
	<ul>
		<li><img src="img/a1.jpeg" alt="" /></li>
		<li><img src="img/a2.jpeg" alt="" /></li>
		<li><img src="img/a3.jpeg" alt="" /></li>
		<li><img src="img/a4.jpeg" alt="" /></li>
	</ul>
</div>

#box{
	width:740px;
	height:116px;
	position:relative;
	margin:20px;
	border:1px solid #000;
	overflow:hidden;
}
#box ul{
	position:absolute;
	left:0;
	top:0;
}
#box ul li{
	float:left;
}

2、JavaScript代码：首先，要用代码把原来的图片内容增加为两倍，使图片可以循环的滚动。然后使用offsetLeft属性，通过改变图片相对父级div的偏移量，使图片不断移动。当图片的整体宽度超过div的边界后，用offsetLeft属性将图片相对于父级div的偏移量清零，重新循环滚动。为了实现代图片的左右方向滚动，在图片下增加两个p标签，当点击两个p标签时，图片分别向左和向右滚动，给两个p标签分别设置鼠标点击事件，执行事件，使图片相对父级div的偏移量分别为一个负数和一个正数，使图片分别向左右两个方向滚动。代码如下：

<script>
	window.οnlοad=function(){
	var oBox=document.getElementById("box");
	var oUl=oBox.getElementsByTagName("ul")[0];
	var aLi=oUl.getElementsByTagName("li");
	var oLeft=document.getElementById("left");
	var oRight=document.getElementById("right");
	var speed=-1;
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
	function move(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
		oUl.style.left="0px";
	        }
		if(oUl.offsetLeft>0){
			oUl.style.left=-oUl.offsetWidth/2+"px";
		}
		oUl.style.left=oUl.offsetLeft+speed+"px";
	}
	oLeft.οnclick=function(){
		speed=-1;
	}
	oRight.οnclick=function(){
		speed=2;
	}
	setInterval(move,50);
}
</script>

p{
	width:100px;
	height:40px;
	line-height:40px;
	text-align:center;
	margin-right:10px;
	background:green;
	color:#000;
	float:left;
	margin-left:20px;
}

什么是DOM

DOM是文档对象模型（document object model），当页面被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的数。各浏览器对DOM的支持情况为：IE 10%；Chrome：60%；Firefox：99%。

查找HTML元素

有三种方法查找HTML元素

1、通过id名查找HTML元素

var oBox.document.getElementById("box");

2、通过标签名查找HTML元素

var aBox=document.getElementsByTagName("div");

3、通过类名查找HTML元素

var oBox=document.getElementsByClassName("box");

IE浏览器不兼容通过类名查找HTML元素

通过DOM，JavaScript可以常见动态的HTML页面。

JavaScript可以改变页面中所有的HTML元素

JavaScript可以改变页面中所有的HTML元素的属性

JavaScript可以改变页面中所有的CSS样式

JavaScript能对页面中所有的事件作出反应

DOM节点

childNodes 通过childNodes可以查找该元素的所有子节点。节点分为两种：元素节点和文本节点。

nodeType 通过nodeType可以返回节点的类型。如果返回nodeType=3，则为文本节点；如果返回nodeType=1，则为元素节点。

children 通过children可以返回该元素的所有元素节点。

parentNode 通过parentNode可以获取该元素的父节点。

首位子节点

firstChild、firstElementChild

lastChild、lastElementChild

在IE环境下，通过firstChild、lastChild可以分别获取元素的首、尾节点；在非IE环境下，通过firstElementChild、lastElementChild可以分别获取元素的首、尾节点。

兄弟节点

nextSibling、nextElementSibling

previousSibling、previousElementSibling

在IE环境下，通过nextSibling、nextElementSibling可以分别获取元素的下一个兄弟节点；在非IE环境下通过previousSibling、previousElementSibling可以分别获取元素的上一个兄弟节点。

通过DOM操作元素属性

获取元素属性：getAttribute（）

设置元素属性：setAttribute（）

删除元素属性：removeAttribute（）