首页 > 代码库 > 无缝滚动
无缝滚动
<html>
<head>
<style>
*{margin:0px; padding:0px;}
#div1{position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;}
ul{ position:absolute;left:0px}
li {list-style:none; float:left; width:150px; height:112px; padding:10px;}
img{ width:150px; height:112px;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oDiv.getElementsByTagName("li");
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";这行如果不加的话，可能会导致折行，就会出现图片出现加载的状况。是因为ul宽带不够。
var ff=oUl.offsetWidth;
timer=setInterval(function()
{
if(oUl.offsetLeft<=-ff)
{
oUl.style.left=0;
}
else
{
oUl.style.left=oUl.offsetLeft-1+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img/4.jpg" /></li>
</ul>
</div>
</body>
<html>
无缝滚动