javascript 另一種圖片滾動轉場效果思路

先說一種最普遍的思路：

把圖片們用ul之類的包起來，並設定float。然後設定這個ul本身為absolute定位，其父標籤用relative定位。通過設定ul的left或top值，實現圖片隊列的滾動效果

特點：

只操作一個html元素（即上文的ul），對系統開銷小；滾到頭會復原；從大序號滾動到小序號也會復原；從最後序號滾動到第一個，會“咻”的一下把所有中間的圖片也路過一次。

另一種思路就是我在XScroll.js裡實現的思路，所有圖片用絕對位置。具體看那篇文章吧。

XScroll.js完成後，我始終覺得他的系統消耗是個問題，因為他實現一個圖片切換基本上都是同時操作兩張圖片。所以我想寫一個精簡版的，但又不想要我文首說那種最普通的。

後來我無意在馬鈴薯女性頻道發現了另一種圖片滾動切換的實現思路。

他的特點是：

無論從哪個序號跳到哪個序號，都只滾動一個步長。比如從1到2，或從1跳到到3，都只滾動一個步長。即使中間有其他圖片，也不會出現；當然，滾到頭也會復原，但復原也是只有一個步長。

這個效果看起來很奇妙，我研究了一下他的html，發現實現方式比我的XScroll.js要簡便的多。 複製代碼 代碼如下:<ul id="idSlider2">
<li style=""><a href="http://office.jb51.net/"><img src="../s1.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="../s2.jpg"/></a></li>
<li><a href="http://baidu.com/"><img src="../s3.jpg"/></a></li>
<li><a href="http://sc.jb51.net/"><img src="../s4.jpg"/></a></li>
</ul>

html結構，很普通；前面的定位跟最普遍的那個思路一樣，都是所有圖片均設定float:left。但JS裡面有蹊蹺：只設定當前圖片為顯示，其餘圖片隱藏，當要滾動時，顯示出下一張圖片，並判斷下一張圖片是在當前圖片前面還是後面：在後面就往左滾，在前面就復原。

由於所有圖片都設定了float,所以當任意兩張圖片顯示出來的時候，他們會因為float的原因緊緊靠在一起，這樣，就不用額外擔心圖片的定位問題了。

而且，這樣一來，也只用操作圖片容器（即那個ul)，而不用操作單張圖片，節省系統資源。

我覺得這種思路很妙，簡單大氣又節約，所以我寫了一個XScroll2.js，來記錄這個效果，感覺還很不錯哈。

有興趣的朋友可以看XScroll2.js的樣本頁，仿的是拍拍網首頁的圖片切換——因為他的效果也是上面說的這種。不過不知道能堅持看到文末的同學有多少呢。。。