编程
您现在的位置:首页 >> 编程

无缝图片滚动

<!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>无缝图片滚动</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="tool/ExamplePic/example5.jpg" width="120" height="89"></li>

    <li><img src="tool/ExamplePic/example6.jpg" width="120" height="89"></li>

    <li><img src="tool/ExamplePic/example7.jpg" width="120" height="89"></li>

    <li><img src="tool/ExamplePic/example8.jpg" width="120" height="89"></li>

    <li><img src="tool/ExamplePic/example9.jpg" width="120" height="89"></li>

  </ul>

</div>

</body>

</html>