<ul id="imgShowList"> <li><a href="image/1 (1).jpg" title="image/1 (1).jpg">圖片1</a></li> <li><a href="image/1 (2).jpg" title="image/1 (2).jpg">圖片2</a></li> <li><a href="image/1 (3).jpg" title="image/1 (3).jpg">圖片3</a></li> <li><a href="image/1 (4).jpg" title="image/1 (4).jpg">圖片4</a></li> <li><a href="image/1 (5).jpg" title="image/1 (5).jpg">圖片5</a></li> <li><a href="image/1 (6).jpg" title="image/1 (6).jpg">圖片6</a></li> <li><a href="image/1 (7).jpg" title="image/1 (7).jpg">圖片7</a></li> <li><a href="image/1 (8).jpg" title="image/1 (8).jpg">圖片8</a></li> </ul>
上面是HTML里面的代碼結構。
實現的原理是:當點擊相應的鏈接時,動態創建一個圖片容器,和該圖片的描述信息,並且將圖片和描述信息分別顯示在各自容器里面。在這里用一個<img><p>標簽作為該容器,同時設置id為imgBox,desc,
下面開始是動態創建一個圖片容器,和該圖片的描述信息的函數:
1 1 function prepareImgBox(){ 2 2 if(!document.createElement) return false; 3 3 if (!document.createTextNode) return false; 4 4 if (!document.getElementById('imgShowList')) return false; 5 5 /*創建圖片,並且設置屬性*/ 6 6 var oImgBox = document.createElement("img"); 7 7 oImgBox.setAttribute("id", "imgBox"); 8 8 oImgBox.setAttribute("src", "image/1.jpg"); 9 9 oImgBox.setAttribute("alt", "圖片一"); 10 10 /*創建圖片描述信息*/ 11 11 var oDesc = document.createElement("p"); 12 12 oDesc.setAttribute("id", "desc"); 13 13 var oTxt1 = document.createTextNode("description");/*此處的圖片描述可以自定義*/ 14 14 oDesc.appendChild(oTxt1); 15 15 var imgShowList = document.getElementById('imgShowList'); 16 16 /*插入圖片以及圖片描述信息*/ 17 17 insertAfter(oImgBox, imgShowList); 18 18 insertAfter(oDesc, oImgBox); 19 19 }
其中,insertAfter為將目標元素插入指定元素后面的函數:
1 function insertAfter(newEle, targetEle){ 2 var parentEle = targetEle.parentNode; 3 if(parentEle.lastChild == targetEle){ 4 parentEle.appendChild(newEle); 5 } 6 else{ 7 parentEle.insertBefore(newEle, targetEle.nextSibling); 8 } 9 }
鼠標點擊不同的鏈接時,切換相應的目標圖片,
切換圖片的函數
1 /*遍歷圖庫里面的每一個鏈接,當用戶點擊某一個鏈接時,就會調用showPic函數*/ 2 function picGallery(){ 3 if(!document.getElementsByTagName){ 4 return false; 5 } 6 if(!document.getElementById){ 7 return false; 8 } 9 if (!document.getElementById('imgShowList')) { 10 return false; 11 } 12 var imgShowList = document.getElementById('imgShowList'); 13 var Links = imgShowList.getElementsByTagName('a'); 14 for (var i = 0; i<Links.length; i++) { 15 Links[i].onclick = function(){ 16 return showPic(this) ? false : true; 17 } 18 } 19 }
1 function showPic(obj){ 2 if(!document.getElementById("imgBox")) return false; 3 var source = obj.getAttribute("href"); 4 var oImgPlace = document.getElementById("imgBox"); 5 if (oImgPlace.nodeName != "IMG") return false; 6 oImgPlace.setAttribute("src", source); 7 8 if (document.getElementById("desc")){ 9 var oTxt = obj.getAttribute("title") ? obj.getAttribute("title") : ""; 10 // var oTxt = obj.getAttribute("title"); 11 var oDesc = document.getElementById('desc'); 12 //p元素本身是是一個空值,文本節點是p元素里面的第一個子節點。 13 if (oDesc.firstChild.nodeType == 3) { 14 oDesc.firstChild.nodeValue = oTxt; 15 } 16 } 17 return true; 18 }
綁定多個函數
/*綁定多個函數*/ function addLoadEvent(func){ //把現有window.onload事件處理函數的值存入變量oldonload var oldonload = window.onload; //若此事件處理函數沒有綁定任何函數,則添加新函數。 if (typeof window.onload != 'function') { window.onload = func; } //否則,把新的函數追加到現有指令末尾。 else{ window.onload = function(){ oldonload(); func(); } } }
/*為了啟用這些功能用addLoadEvent函數來調用prepareImgBox、picGallery函數*/ addLoadEvent(picGallery); addLoadEvent(prepareImgBox);
總之,一句話,創建img、p兩個元素,現在頁面上加載一張圖片,用戶點擊切換不同的圖片時,同步讀取該鏈接的href、title屬性值,賦值給img的src,p的nodeValue.從而實現效果。
這是我的一些心得,不足之處,還請指教。