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