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>js图片滚动无缝衔接
原文地址：https://www.cnblogs.com/lxystar/p/10214633.html