制作无缝滚动的滚动封装好的函数：

来源：互联网发布：系统编程编辑：程序博客网时间：2024/05/22 11:39

制作无缝滚动的滚动封装好的函数：

function move(obj,speed){//其中obj:表示的是移动的对象,speed：表示的是移动的速度

if(obj.offsetLeft<-obj.offsetWidth/2){//向左移动的判断

obj.style.left='0';

}

if(obj.offsetLeft>0){//向右移动的判断

obj.style.left=-obj.offsetWidth/2+'px';

}

obj.style.left=obj.offsetLeft+speed+'px';

}

可以调用上述函数的模型：

<div id="box">

<ul>

<li></li>

</ul>

</div>

其中模型的条件：

1：div块必须给他定位为（relative）

2：ul必须为他定位为（absolute）

3:ul的大小跟li的数量有关：aUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

实现的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Document</title>

div,body,ul,li{

margin: 0;

padding: 0;

}

#box{

width: 200px;

height: 200px;

background-color: green;

position: relative;

overflow: hidden;

}

#box ul{

position: absolute;

}

#box ul li{

display: block;

width: 50px;

height: 50px;

float: left;

background-color: yellow;

}

</style>

function move(obj,speed){//其中obj:表示的是移动的对象,speed：表示的是移动的速度

if(obj.offsetLeft<-obj.offsetWidth/2){//向左移动的判断

obj.style.left='0';

}

if(obj.offsetLeft>0){//向右移动的判断

obj.style.left=-obj.offsetWidth/2+'px';

}

obj.style.left=obj.offsetLeft+speed+'px';

}

window.onload=function(){

var speed=2;

varoBox=document.getElementById('box');

varaUl=oBox.getElementsByTagName('ul')[0];

var aLi=aUl.getElementsByTagName('li');

for(vari=0;i<aLi.length;i++){//给li设置颜色方便看出移动效果

if(i%2==0){

aLi[i].style.background="red";

}

aUl.innerHTML+=aUl.innerHTML;

aUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

varoBtn=document.getElementById('btn');

oBtn.onclick=function(){

setInterval(function(){move(aUl,speed)}, 30);

};

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

0 0