快捷導(dǎo)航

javascript 另一種圖片滾動(dòng)切換效果思路

更新時(shí)間：2012年04月20日 00:18:07 作者：

把圖片們用ul之類的包起來(lái)，并設(shè)置float。然后設(shè)置這個(gè)ul本身為absolute定位，其父標(biāo)簽用relative定位。通過(guò)設(shè)置ul的left或top值，實(shí)現(xiàn)圖片隊(duì)列的滾動(dòng)效果

先說(shuō)一種最普遍的思路：

把圖片們用ul之類的包起來(lái)，并設(shè)置float。然后設(shè)置這個(gè)ul本身為absolute定位，其父標(biāo)簽用relative定位。通過(guò)設(shè)置ul的left或top值，實(shí)現(xiàn)圖片隊(duì)列的滾動(dòng)效果

特點(diǎn)：

只操作一個(gè)html元素（即上文的ul），對(duì)系統(tǒng)開(kāi)銷??；滾到頭會(huì)回滾；從大序號(hào)滾動(dòng)到小序號(hào)也會(huì)回滾；從最后序號(hào)滾動(dòng)到第一個(gè)，會(huì)“咻”的一下把所有中間的圖片也路過(guò)一次。

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

XScroll.js完成后，我始終覺(jué)得他的系統(tǒng)消耗是個(gè)問(wèn)題，因?yàn)樗麑?shí)現(xiàn)一個(gè)圖片切換基本上都是同時(shí)操作兩張圖片。所以我想寫一個(gè)精簡(jiǎn)版的，但又不想要我文首說(shuō)那種最普通的。

后來(lái)我無(wú)意在土豆女性頻道發(fā)現(xiàn)了另一種圖片滾動(dòng)切換的實(shí)現(xiàn)思路。

他的特點(diǎn)是：

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

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

復(fù)制代碼代碼如下:

 
<ul id="idSlider2"> 
<li style=""><a ><img src="../s1.jpg"/></a></li> 
<li><a ><img src="../s2.jpg"/></a></li> 
<li><a ><img src="../s3.jpg"/></a></li> 
<li><a ><img src="../s4.jpg"/></a></li> 
</ul> 

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

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

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

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

有興趣的朋友可以看XScroll2.js的示例頁(yè)，仿的是拍拍網(wǎng)首頁(yè)的圖片切換——因?yàn)樗男Ч彩巧厦嬲f(shuō)的這種。不過(guò)不知道能堅(jiān)持看到文末的同學(xué)有多少呢。。。

您可能感興趣的文章: