无缝滚动的算法

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

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