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

195 阅读 0 评论 129 点赞

我是靠谱客的博主复杂汉堡，最近开发中收集的这篇文章主要介绍无缝滚动js代码通俗易懂(自写)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style> 
*{padding:0; margin:0;} 
ul{ list-style:none;} 
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;} 
#div ul{ position:absolute; height:100px; left:0;} 
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left} 
</style> 
<script> 
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; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="左"> 
<input type="button" value="右"> 
<div id='div'> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
</body> 
</html> 