js图片滚动无缝衔接
<style> *{ margin:0; padding:0; } div{ width:600px; height:200px; position:relative; border:1px solid red; margin:100px; overflow:hidden; } ul{ width:600%; position:absolute; left:0; } li{ float:left; list-style:none; } </style> <body> <div id="box"> <ul id="u"> <li><img src="a.jpg" /></li> <li><img src="b.jpg" /></li> <li><img src="c.jpg" /></li> <li><img src="d.jpg" /></li> <li><img src="a.jpg" /></li> <li><img src="b.jpg" /></li> </ul> </div> </body></html><script> var num = 0; // 默认ul位置 var oUl = document.getElementById("u"); var box = document.getElementById("box"); function autoPlay(){ oUl.style.left=num+"px"; num-=2; if(num<=-1200){ num=0 } } var timer=setInterval(autoPlay,100); box.onmouseover=function(){ clearInterval(timer); } box.onmouseout=function(){ timer=setInterval(autoPlay,100); }</script>
