无缝滚动的算法
一早上的时间做了一个简单的无缝滚动，遇到的问题特别的多，而且对无缝滚动的算法也不是特别的清楚。
无缝滚动效果的原理：就是几个图片 浮动成为一排；然后让图片滚动，正常情况下图片滚完，就留下了后面的空白，而我们的处理的逻辑就是让图片滚动到ul长度的一半的时候，迅速将ul拉回开始的位置。
遇到的问题：1、图片的路径问题
2、/、\这两个的区别；windows系统:反斜杠“\“用来表示目录；正斜杠“/”用来表示网址、Url地址。
3、绝对定位 相对定位
4、算法的问题，包括 ul的width,滚动到ul长度的一半的时候，设置为0；
5、初始化的问题，若没有初始化，ul和div会有出入；
6、margin 0 auto,无法居中的问题；解决办法：要居中的元素，无浮动，无定位(居中前至少么有)
解决办法：
如果不给一个div添加绝对定位或者相对定位属性，而就去改动他的left和top值 是没有效果的。div的left和top会一直是初始值。
相对定位是“相对于”元素在文档中的初始位置；
绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”整个document.
windows系统:反斜杠“\“用来表示目录；正斜杠“/”用来表示网址、Url地址。
<style> * { margin: 0px; padding: 0px;//若没有初始化，会出现div和ul尽管宽度高度一样，却无法重合的怪像；
} #div1{ width:1120px; height: 151px; margin: 100px auto; //居中的元素不能有定位，不能有浮动（至少该行代码之前并无） background: red; position: relative;//相对定位是让div相对自己来移动 overflow: hidden; } #div1 ul{ position: absolute;//要让一个物体运动起来，必须要给加上position属性。给ul加绝对定位，用意在于滚动的时候整个ul可以以一个整体来动，不用单个li运动
left:0px;
top:0px; } #div1 ul li{ float: left; list-style-type:none; width: 280px; height: 151px; } </style> <body> <div id="div1"> <ul> <li><img src="img/1.png" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> </div> </body> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length+'px'; setInterval(function(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0'; }else{ oUl.style.left = oUl.offsetLeft-2+'px'; } },30); } </script>
//offsetLeft 和 offsetTop 是元素自身在绝对定位时相对于父元素的值。
//style.left是可写的，他接受offsetleft的赋值。
//style.left设置某个元素的位置，是实时刷新的，而且left是可以设置的。返回的是字符串。
//这里意思是，用任意一个li的宽度*li的length.这样算出的就是ul的宽度，这样就避免了ul占2行的情况。
<script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length+'px'; setInterval(function(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left = '0'; } if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px';//处理图片滚完断层的问题，向右边滚动，当滚动一半的时候要将ul往左扯，扯回去的位置肯定是负的，所以要加-号 } oUl.style.left = oUl.offsetLeft+2+'px';//这个是向右边滚动 },30); } </script>
