Code area
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
padding:0px;
margin:0px;
}
#box{
width:800px;
height:200px;
background-color:green;
position:relative;
margin:100px auto;
overflow:hidden;
}
#box ul{
position:absolute;
left:0;
top:0;
list-style:none;
}
ul > li{
float:left;
}
</style>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="box">
<ul>
<li><img src="images/10.jpg"></li>
<li><img src="images/11.jpg"></li>
<li><img src="images/12.jpg"></li>
<li><img src="images/10.jpg"></li>
</ul>
</div>
</body>
</head>
<script>
window.onload=function(){
var Dbox=document.getElementById("box");
var aul=Dbox.getElementsByTagName("ul")[0];
var ali=aul.getElementsByTagName("li");
var speed=2;
aul.innerHTML=aul.innerHTML+aul.innerHTML;
aul.style.width=ali[0].offsetWidth*ali.length+'px';
function move()
{
//offsetLeft有可能是负数 offsetWidth不是负数，所以需要给他添加负号
if(aul.offsetLeft<-aul.offsetWidth/2)
{
aul.style.left='0';
}
if(aul.offsetLeft>=0)
{
aul.style.left=-aul.offsetWidth/2+'px';
}
aul.style.left=aul.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
Dbox.onmouseover=function(){
clearInterval(timer);
}
Dbox.onmouseout=function(){
timer=setInterval(move,30);
}
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
};
};
</script>
</html>
