JS+CSS控制图片向上无缝滚动代码
代码简介：
使一组图上无缝向上滚动的效果，用CSS定义滚动区域的大小与图片正好重叠，然后用JS定义每次滚动的距离也正好与图片大小一样，实现了这种美妙的图片效果。如果要更改图片的大小，记着要把CSS也一并修改哦！
代码内容:
View Code
<!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>
<title>JS+CSS控制图片向上无缝滚动代码 - www.webdm.cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#ad{
position:absolute;
width:120px;
height:89px;
border:1px solid #000;
overflow:hidden;
}
#ad ul{
position:absolute;
list-style-type:none;
margin:0;
padding:0;
}
</style>
<script language="javascript">
var ad = {
o:null, // 存放滚动的UL
cloneImg:null, //克隆UL的第一个图片
adY:0, //滚动值
distan:0, //每个图片的高度
///
init:function(obj){
if(!obj.style.top){
obj.style.top = '0px';
}
this.cloneImg = obj.firstChild.cloneNode(true); //克隆第一个节点
if(this.cloneImg.nodeType == 3) this.cloneImg = obj.firstChild.nextSibling.cloneNode(true); //除
IE外第一个节点为文本节点，让克隆节点还是指向第一个元素
obj.appendChild(this.cloneImg); //让克隆的节点放入最后
this.adY = parseInt(obj.style.top);
this.o = obj;
this.distan = this.cloneImg.offsetHeight;
this.moveCtrl();
},
moveCtrl:function(){
if(Math.abs(this.adY) == this.o.offsetHeight - this.distan) this.adY = 0;//到达底部滚动跳回最上面
if(Math.abs(this.adY)%this.distan==0){
setTimeout('ad.moveCtrl()',2000);//图片停留延迟
} else {
setTimeout('ad.moveCtrl()',10);//运动循环
}
--this.adY;
ad.o.style.top = this.adY + 'px';
}
}
window.onload = function(){
var obj = document.getElementById('adul');
ad.init(obj);
}
</script>
</head>
<body>
<div id="ad">
<ul id="adul">
<li><img src="http://www.webdm.cn/images/wall1_s.jpg"></li>
<li><img src="http://www.webdm.cn/images/wall2_s.jpg"></li>
<li><img src="http://www.webdm.cn/images/wall3_s.jpg"></li>
<li><img src="http://www.webdm.cn/images/wall4_s.jpg"></li>
<li><img src="http://www.webdm.cn/images/wall5_s.jpg"></li>
</ul>
</div>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/2a7f45ac-2f21-402b-8d7e-7fd52efca330.html
