<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#box{600px;height:400px;border:3px solid #ff0000;margin:100px auto;position:relative;overflow:hidden;}
#box ul{height:400px;position:absolute;}
#box ul li{600px;height:400px;float:left;z}
</style>
<script type="text/javascript">
window.onload=function()
{
//获取要用到的元素
var oDiv=document.getElementById("box");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aA=document.getElementsByTagName("a");
var speed=2;
//复制一份ul的内容也就是复制一份图片
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";
//滚动函数
function move(){
timer=setInterval(function()
{
//判断是否滚动到ul的一半（两份图的一半），是就left归零重新运动
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=0;
}
//判断是否向右滚动，是就向左移一份图的距离
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+"px";
}
//通过offsetLeft+speed进行滚动
oUl.style.left=oUl.offsetLeft+speed+"px";
},30);
}
move();//调用函数使图片滚动
//鼠标移入关闭定时器停止滚动
oDiv.onmouseover=function()
{
clearInterval(timer);
}
//鼠标移出调用函数使滚动
oDiv.onmouseout=function()
{
move();
}
//向左运动
aA[0].onclick=function()
{
speed=-2;
}
//向右运动
aA[1].onclick=function()
{
speed=2;
}
};
</script>
</head>
<body>
<a href="javascript:;">左</a>
<a href="javascript:;">右</a>
<div id="box">
<ul>
<!-- 自己更改图片路径和设置图片大小 -->
<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845t3pegillooc8gxho.jpg"</a></li>
<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845ik7ekpbkmlmpp3w8.jpg"</a></li>
<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845amsmtdgdm2r0gmcc.jpg"</a></li>
</ul>
</div>
</body>
</html>