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）图片无缝滚动其实就是把所有的图片在加上一个重复，这个可以参考代码。