先說一種最普遍的思路：
把圖片們用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的示例頁，仿的是拍拍網首頁的圖片切換——因為他的效果也是上面說的這種。不過不知道能堅持看到文末的同學有多少呢。。。