<div id="demo"> <div id="innerdemo"> <div id="demo1"> <img src="images/0.jpg" /> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> </div> <div id="demo2"></div> </div> </div>
#demo{ 600px; height:200px; border:1px solid #CCC; margin:20px auto; overflow:hidden;} #innerdemo{ 800%; } #demo1,#demo2{float:left;}
function crossMarquee(){ var speed=10; var oDemo=document.getElementById("demo"); var oinnerDemo=document.getElementById("innerdemo"); var oDemo1=document.getElementById("demo1"); var oDemo2=document.getElementById("demo2"); oDemo2.innerHTML=oDemo1.innerHTML; function Marquee(){ if(oDemo1.offsetWidth<=oDemo.scrollLeft){ oDemo.scrollLeft-=oDemo1.offsetWidth; }else{ oDemo.scrollLeft++; } } var myMar=setInterval(Marquee,speed); oDemo.onmouseover=function(){clearInterval(myMar);} oDemo.onmouseout=function(){myMar=setInterval(Marquee,speed);} } window.onload=function(){ crossMarquee() };
这是一个简单的js无缝滚动代码,有个需要注意的地方
1、scrollLeft必须在最外层容器上执行
2、scrollLeft无需加单位px