无缝滚动的算法

一早上的时间做了一个简单的无缝滚动，遇到的问题特别的多，而且对无缝滚动的算法也不是特别的清楚。

无缝滚动效果的原理：就是几个图片浮动成为一排；然后让图片滚动，正常情况下图片滚完，就留下了后面的空白，而我们的处理的逻辑就是让图片滚动到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>