js圖片滾動無縫銜接
阿新 • • 發佈：2019-01-03
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" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" /></li> <li><img src="d.jpg" alt="" /></li> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></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>