1、描述——无缝滚动图片
2、代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
.box{
width:600px;
height:200px;
border:1px solid gray;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.box ul{
list-style: none;
width:300%;
position:absolute;
top:0;
left:0;
}
.box ul li{
float:left;
}
.box ul li img{
/*不写这句话的话,会有一个下边距*/
vertical-align: top;
cursor:pointer;
}
</style>
</head> <body>
<div class="box">
<ul>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
<li><img src="img/03.jpg" alt="" /></li>
<li><img src="img/04.jpg" alt="" /></li>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
</ul>
</div>
</body> </html>
<script type="text/javascript">
var ul=document.getElementsByTagName("ul")[0];
var left=0;
var timer=null;
timer=setInterval(autoPlay,5);
function autoPlay(){
left--;
if(left>-1200){ }else{
left=0;
}
ul.style.left=left+"px";
}
ul.parentNode.onmousemove=function(){
clearInterval(timer);
}
ul.parentNode.onmouseout=function(){
timer=setInterval(autoPlay,5);
}
</script>
3、效果
无缝滚动
4、注意事项
（1）图片没有浮动之前，会有3像素的边距
解决办法：对img{vertical-align:top;}添加这个属性。
（2）图片无缝滚动其实就是把所有的图片在加上一个重复，这个可以参考代码。