【JavaScript】利用文件碎片DocumentFragment改進(jìn)兼容IE6可調(diào)可控的圖片滑塊
來(lái)源：程序員人生 發(fā)布時(shí)間：2015-04-07 08:30:35 閱讀次數(shù)：2760次
上次在《【JavaScript】兼容IE6可調(diào)可控的圖片滑塊》（點(diǎn)擊打開(kāi)鏈接）的算法寫(xiě)得很不好，如果你要做N個(gè)圖片的圖片滑塊，每次顯示X張圖片，則要1次性地多加載X⑴張圖片，還要用1種顯示框移動(dòng)的方法去實(shí)現(xiàn)。更可怕的是，還要天經(jīng)地義地認(rèn)為就是這樣的。雖然這個(gè)背背常人思惟方式在網(wǎng)上廣泛流傳，而且好像還是公式1樣，就只有1種實(shí)現(xiàn)方法，其實(shí)不是的，明顯可以利用文件碎片DocumentFragment去實(shí)現(xiàn)圖片滑塊，如果你要N個(gè)圖片的圖片滑塊，就加載N個(gè)圖片，這才是正常的。關(guān)鍵利用文件碎片，實(shí)現(xiàn)200000張圖片的圖片滑塊也是沒(méi)問(wèn)題的。前文寫(xiě)的方法就捉襟見(jiàn)肘了。
1、基本目標(biāo)
還是與上次1模1樣的功能，但是實(shí)現(xiàn)方式與上次不同，具體請(qǐng)比對(duì)兩篇文章瀏覽
2、基本思想
上次要加載N張圖片，利用顯示滑塊去實(shí)現(xiàn)，但是這次再利用以下的方式：
就是我在上文中認(rèn)為打死也不可能的方式，把4個(gè)圖片滑塊看作是數(shù)組，滑塊向左移則把數(shù)組第1個(gè)元素移到末尾，滑塊向右移則把數(shù)組最后1個(gè)元素移到頭部。
3、制作進(jìn)程
1、HTML布局還是上文的布局，圖片就是那幾張從winxp系統(tǒng)拔來(lái)的可憐圖片，1字沒(méi)改，具體以下，不再贅述。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>picmarquee</title>
</head>
<body>
<div>sssssss</div>
<div style="float:left;"><button onclick="pic_marquee_move(0)"><</button></div>
<div id="picMarquee" style="float:left;">
<div style="padding-left:10px; float:left; display:block;"><a href="imgs/Ascent.jpg" target="_new"><img src="imgs/Ascent.jpg" width="50px" border="0" /></a></div>
<div style="padding-left:10px; float:left; display:block;"><a href="imgs/Autumn.jpg" target="_new"><img src="imgs/Autumn.jpg" width="50px" border="0" /></a></div>
<div style="padding-left:10px; float:left; display:block;"><a href="imgs/Azul.jpg" target="_new"><img src="imgs/Azul.jpg" width="50px" border="0" /></a></div>
<div style="padding-left:10px; float:left; display:block;"><a href="imgs/Crystal.jpg" target="_new"><img src="imgs/Crystal.jpg" width="50px" border="0" /></a></div>
</div>
<div style="float:left; padding-left:10px;"><button onclick="pic_marquee_move(1)">></button></div>
<div style="clear:both"></div>
<div>sssssss</div>
</body>
</html>
2、以后的javascript實(shí)現(xiàn)部份是實(shí)現(xiàn)的重點(diǎn)，這里靈活使用了《【JavaScript】利用getElementsByTagName與getElementsByName改進(jìn)原生態(tài)兼容IE6標(biāo)簽頁(yè)》（點(diǎn)擊打開(kāi)鏈接）成組取節(jié)點(diǎn)的方式與javascript對(duì)數(shù)組Array的操作函數(shù)unshift(),shift(),pop(),push()，文件碎片就是1個(gè)在內(nèi)存的節(jié)點(diǎn)，與操作平時(shí)節(jié)點(diǎn)《【JavaScript】網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查》（點(diǎn)擊打開(kāi)鏈接）沒(méi)有任何區(qū)分，具體以下：
<script>
//網(wǎng)頁(yè)加載就要調(diào)用這個(gè)函數(shù)了，參數(shù)1代表向右轉(zhuǎn)動(dòng)，注意HTML的按鈕調(diào)用的函數(shù)你就知道了
pic_marquee_move(1);
//每2S向右變換1次
setInterval("pic_marquee_move(1)",2000);
function pic_marquee_move(leftOrRight){
//獲得picMarquee下的所有div節(jié)點(diǎn)，構(gòu)成1個(gè)數(shù)組
var divArr=document.getElementById("picMarquee").getElementsByTagName("div");
//只是這樣的1個(gè)“援用數(shù)組”還不能直接操作，必須新建1個(gè)真正數(shù)組把這里面的所有存進(jìn)去
var tempSoftArr=new Array();
for(var i=0;i<divArr.length;i++){
tempSoftArr[i]=divArr[i];
}
//如果向左移
if(leftOrRight==0){
//那末把刪除數(shù)組第1個(gè)元素，并把這個(gè)元素通過(guò)變量存起來(lái)
var firstPic=tempSoftArr.shift();
//以后把這個(gè)元素放到這個(gè)數(shù)組的最后1個(gè)位置，也相當(dāng)于插入到數(shù)組
tempSoftArr[tempSoftArr.length]=firstPic;
}
else{
//如果向右移，把最后1個(gè)元素放到這個(gè)數(shù)組的頭部
tempSoftArr.unshift(tempSoftArr.pop());
}
//新建1個(gè)文件碎片，文件碎片就是1個(gè)暫存夾，你先把這個(gè)節(jié)點(diǎn)弄好再放到真實(shí)的網(wǎng)頁(yè)里面去，不用弄1個(gè)節(jié)點(diǎn)就刷新1次網(wǎng)頁(yè)，卡爆
var frag=document.createDocumentFragment();
for(var i=0;i<tempSoftArr.length;i++){
frag.appendChild(tempSoftArr[i]);
}
//文件碎片是替換插入方式，原來(lái)id為picMarquee節(jié)點(diǎn)旗下的東西會(huì)被文件碎片節(jié)點(diǎn)替換
document.getElementById("picMarquee").appendChild(frag);
}
</script>
至此，全部畫(huà)圖滑塊做完。
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
