【JavaScript】利用文件碎片DocumentFragment改進兼容IE6可調可控的圖片滑塊
來源：程序員人生 發布時間：2015-04-07 08:30:35 閱讀次數：2752次
上次在《【JavaScript】兼容IE6可調可控的圖片滑塊》（點擊打開鏈接）的算法寫得很不好，如果你要做N個圖片的圖片滑塊，每次顯示X張圖片，則要1次性地多加載X⑴張圖片，還要用1種顯示框移動的方法去實現。更可怕的是，還要天經地義地認為就是這樣的。雖然這個背背常人思惟方式在網上廣泛流傳，而且好像還是公式1樣，就只有1種實現方法，其實不是的，明顯可以利用文件碎片DocumentFragment去實現圖片滑塊，如果你要N個圖片的圖片滑塊，就加載N個圖片，這才是正常的。關鍵利用文件碎片，實現200000張圖片的圖片滑塊也是沒問題的。前文寫的方法就捉襟見肘了。
1、基本目標
還是與上次1模1樣的功能，但是實現方式與上次不同，具體請比對兩篇文章瀏覽
2、基本思想
上次要加載N張圖片，利用顯示滑塊去實現，但是這次再利用以下的方式：
就是我在上文中認為打死也不可能的方式，把4個圖片滑塊看作是數組，滑塊向左移則把數組第1個元素移到末尾，滑塊向右移則把數組最后1個元素移到頭部。
3、制作進程
1、HTML布局還是上文的布局，圖片就是那幾張從winxp系統拔來的可憐圖片，1字沒改，具體以下，不再贅述。
<!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實現部份是實現的重點，這里靈活使用了《【JavaScript】利用getElementsByTagName與getElementsByName改進原生態兼容IE6標簽頁》（點擊打開鏈接）成組取節點的方式與javascript對數組Array的操作函數unshift(),shift(),pop(),push()，文件碎片就是1個在內存的節點，與操作平時節點《【JavaScript】網頁節點的增刪改查》（點擊打開鏈接）沒有任何區分，具體以下：
<script>
//網頁加載就要調用這個函數了，參數1代表向右轉動，注意HTML的按鈕調用的函數你就知道了
pic_marquee_move(1);
//每2S向右變換1次
setInterval("pic_marquee_move(1)",2000);
function pic_marquee_move(leftOrRight){
//獲得picMarquee下的所有div節點，構成1個數組
var divArr=document.getElementById("picMarquee").getElementsByTagName("div");
//只是這樣的1個“援用數組”還不能直接操作，必須新建1個真正數組把這里面的所有存進去
var tempSoftArr=new Array();
for(var i=0;i<divArr.length;i++){
tempSoftArr[i]=divArr[i];
}
//如果向左移
if(leftOrRight==0){
//那末把刪除數組第1個元素，并把這個元素通過變量存起來
var firstPic=tempSoftArr.shift();
//以后把這個元素放到這個數組的最后1個位置，也相當于插入到數組
tempSoftArr[tempSoftArr.length]=firstPic;
}
else{
//如果向右移，把最后1個元素放到這個數組的頭部
tempSoftArr.unshift(tempSoftArr.pop());
}
//新建1個文件碎片，文件碎片就是1個暫存夾，你先把這個節點弄好再放到真實的網頁里面去，不用弄1個節點就刷新1次網頁，卡爆
var frag=document.createDocumentFragment();
for(var i=0;i<tempSoftArr.length;i++){
frag.appendChild(tempSoftArr[i]);
}
//文件碎片是替換插入方式，原來id為picMarquee節點旗下的東西會被文件碎片節點替換
document.getElementById("picMarquee").appendChild(frag);
}
</script>
至此，全部畫圖滑塊做完。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
