无缝滚动js代码通俗易懂(自写)_javascript技巧



代码如下:







window.onload=function(){
var oDiv=document.getElementById("div");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");
var oInput=document.getElementsByTagName('input');
oUl.innerHTML +=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
var iSeep=-2;
var tamer=null;
clearInterval(tamer);
function starMove(){
tamer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSeep+"px";
if(-oUl.offsetLeft >= oUl.offsetWidth/2){
oUl.style.left="0px";
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
},30)
}
starMove();
oDiv.onmouseover=function(){
clearInterval(tamer);
}
oDiv.onmouseout=function(){
starMove();
}
oInput[0].onclick=function(){
iSeep=-2;
}
oInput[1].onclick=function(){
iSeep=2;
}
}

1

2

3

4