先說一種最普遍的思路：

把圖片們用ul之類的包起來，并設(shè)置float。然后設(shè)置這個ul本身為absolute定位，其父標簽用relative定位。通過設(shè)置ul的left或top值，實現(xiàn)圖片隊列的滾動效果

特點：

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

另一種思路就是我在XScroll.js里實現(xiàn)的思路，所有圖片用絕對定位。具體看那篇文章吧。

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

后來我無意在土豆女性頻道發(fā)現(xiàn)了另一種圖片滾動切換的實現(xiàn)思路。

他的特點是：

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

這個效果看起來很奇妙，我研究了一下他的html，發(fā)現(xiàn)實現(xiàn)方式比我的XScroll.js要簡便的多。

html結(jié)構(gòu)，很普通；前面的定位跟最普遍的那個思路一樣，都是所有圖片均設(shè)置float:left。但JS里面有蹊蹺：只設(shè)置當(dāng)前圖片為顯示，其余圖片隱藏，當(dāng)要滾動時，顯示出下一張圖片，并判斷下一張圖片是在當(dāng)前圖片前面還是后面：在后面就往左滾，在前面就回滾。

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

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

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

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

最新評論