1.简单的无缝连续滚动
原来：页面上是6个图片，编号0、1、2、3、4、5，复制一倍在后面，长长的火车在来回移动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } ul{ list-style:none; } .rolling{ width:800px; height:130px; border:10px solid #000; margin:50px auto; position:relative; overflow:hidden; } .rolling .m_unit{ width:5000px; position:absolute; top:0; left:0; } .rolling ul li{ float:left; margin-right:10px; } </style> </head> <body> <div class="rolling" id="rolling"> <div class="m_unit" id="m_unit"> <ul> <li><a href="###"><img src="images/shuzi/0.png" /></a></li> <li><a href="###"><img src="images/shuzi/1.png" /></a></li> <li><a href="###"><img src="images/shuzi/2.png" /></a></li> <li><a href="###"><img src="images/shuzi/3.png" /></a></li> <li><a href="###"><img src="images/shuzi/4.png" /></a></li> <li><a href="###"><img src="images/shuzi/5.png" /></a></li> </ul> </div> </div> </body> </html> <script type="text/javascript"> var rolling=document.getElementById('rolling'); var m_unit=document.getElementById('m_unit'); var listul=m_unit.getElementsByTagName('ul')[0]; //获取ui var listlength=m_unit.getElementsByTagName('li').length; //获取li的长度 listul.innerHTML+=listul.innerHTML; // 复制一倍的li标签 var timer; //存定时器 var nowleft=0; var zhefandian = -210*listlength; //鼠标移入大盒子的时候停止定时器 rolling.onmouseenter=function(){ clearInterval(timer); } rolling.onmouseleave=function(){ move(); } function move(){ timer=setInterval(function (){ nowleft-=3; if(nowleft<zhefandian){ nowleft=0; } m_unit.style.left=nowleft+'px'; },10) } move(); </script>
2.高级无缝滚动
①HTML结构中重复的代码，用js动态的添加。
②折返点：不要自己计算，要通过页面加载效果自动获取宽度，折返点的宽度应该等于ul内部所有里元素宽度的一半。方法：li不要添加宽度，浮动的元素被img自动撑宽，ul也不要加宽度，绝对定位的元素用内部的li元素撑宽。
解决方法有两种：
方法1：遍历前半部分（复制一倍之前）所有li，进行宽度累加，累加之后就是折返点。
上午学offsetWidth，但是这个方法不带margin。所以累加的时候，要得到计算后的margin麻烦，所以不考虑方法1。
方法2：折返点就是假火车第一张图的offsetLeft值，所以，如果原理的li个数是liLength，那么假火车的第一张图就是listLength[length]。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } .rolling{ width: 800px; height: 130px; border: 10px solid #ccc; margin: 100px auto; position: relative; overflow: hidden; } .rolling .m_unit{ /*这是运动的单位*/ /*这个宽度足以致命，为了让所有的li能够并排*/ /*这个宽度随便取，大一点*/ width: 5000px; position: absolute; top: 0; left: 0; } .rolling ul li{ float: left; margin-right: 10px; } </style> </head> <body> <div class="rolling" id="rolling"> <div class="m_unit" id="m_unit"> <ul> <li><a href=""><img src="images/shuzi/0.png" /></a></li> <li><a href=""><img src="images/shuzi/1.png" /></a></li> <li><a href=""><img src="images/shuzi/2.png" /></a></li> <li><a href=""><img src="images/shuzi/3.png" /></a></li> <li><a href=""><img src="images/shuzi/pangzi.png" /></a></li> <li><a href=""><img src="images/shuzi/4.png" /></a></li> <li><a href=""><img src="images/shuzi/5.png" /></a></li> </ul> </div> </div> </body> </html> <script type="text/javascript"> var rolling =document.getElementById('rolling'); var m_unit =document.getElementById('m_unit'); var ullist=m_unit.getElementsByTagName('ul')[0] ; //获取ul var lis=m_unit.getElementsByTagName('li'); //获取所有li var imgs=m_unit.getElementsByTagName('img'); //获取所有img ullist.innerHTML+=ullist.innerHTML; //复制一份ul var lislength=lis.length; // 获取所以li的长度，包括新的 var timer; //存定时器 var nowleft=0; //定义全局信号量，接收left的运动值。 var zhefandian; //要计算折返点，但每个li宽度不一样，所以假火车开头元素的offsetLef t就是折返点，这个元素是lis/2 //但是由于Chrome的机理，如果要读取offsetLeft值必须保证所有图片加载完毕 var count=0; //图片计数器 for(var i=0; i<imgs.length; i++){ imgs[i].onload=function(){ count++; if(count == imgs.length){ zhefandian=lis[lislength/2].offsetLeft; } } } rolling.onmouseenter=function(){ clearInterval(timer); } rolling.onmouseleave=function(){ move(); } function move(){ timer=setInterval(function(){ nowleft-=3; if(nowleft < -zhefandian){ nowleft=0; } m_unit.style.left= nowleft+'px'; },10) } move(); </script>