javascript實作圖檔無縫滾動-------Day 27

今天感冒變嚴重了，鼻涕止不住啊，一卷衛生紙就這樣報廢了，還是不想吃藥，熬熬總能熬過去吧，狀态不是很好，看這麼個小應用竟然看了很久的時間，到最後才像猛的明白了一樣，而且查着好像有好幾種做法的，今天先說說這種吧，比較好了解額。

所謂“圖檔無縫滾動”，我們可以這樣來了解，如果隻用marquee，則需要尾部也離開容器了，頭部才能從頭部另一端出現，重新進行滾動，如是進行循環，而無縫滾動，就是說一種首尾相連的效果，頭部是咬在尾部上的，尾部全部漏出來後，後面緊挨着顯示頭部的部分，這樣首尾相連進行的滾動就是圖檔無縫滾動。

了解了定義，來簡單了解下實作的基本原理：

将一個序列中的所有li進行複制，添加到現有的li後面，則每次滾動到露出尾部的時候，後面緊跟着的則是複制部分的頭部部分，那麼我們要問了，當後面運作到尾部的時候呢，難道要再進行指派，答案當然不是，換個思路想，當原來部分的尾部全部露出的時候，也就是現有的總部分的一半的時候，我們觀察此時頁面的狀态是不是就跟初始狀态一樣了，是的，完全一樣，那麼我們就可以根據css的設定，将顯示部分傳回初始狀态，這樣進行周而複始，就形成了無縫滾動的效果了。

說了那麼多，還是上代碼來的更明白：

1、寫html部分

2、設定css樣式，顯示初始滾動前的樣子

這裡有兩個是非常重要的：1、ul的position必須是absolute的；2、容器，也就是div，的overflow：hidden，隐藏溢出部分；

3、用javascript實作滾動

定義方法之後，一定要運作才有效，是以scroll()一定不要漏掉；另外，看到這裡style.left的設定，知道ul為什麼一定要用absolute了吧；定時器還是很好用啊，給力。

其實這個小應用中最大的收獲有兩個：1、容器，溢出隐藏；2、複制用以滾動，這兩個比較新穎啊

不行了，實在困了，感冒要人命啊，睡覺去....