一早上的時間做了一個簡單的無縫滾動，遇到的問題特別的多，而且對無縫滾動的算法也不是特別的清楚。
無縫滾動效果的原理：就是幾個圖片 ?浮動成為一排；然后讓圖片滾動，正常情況下圖片滾完，就留下了后面的空白，而我們的處理的邏輯就是讓圖片滾動到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>
?
)
