HTML代碼 CSS代碼 ...
addloadevent(prepareplaceholder()) addloadevent(prepareGallery()) //頁面載入完時執行函數 function addloadevent(func) { //參數放入你界面載入完要執行的函數 var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { oldonload(); func(); } } // 向後插入元素方法 function insertAfter(ent,hou) { //第一個參數你要出入的節點，第二參數你要插入誰的後面 var parer = hou.parentNode; //獲取他的父級判斷所選的元素是否是最後一個 if (parer.lastChild == hou) { parer.appendChild(ent); //如果是最後一個直接執行appendChild插入到後面 } else { parer.insertBefore(ent, hou.nextSibling); //如果不是則插入到父級的同級的前面 } } //插入img 和 p節點設置屬性 function prepareplaceholder() { if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; //創建一個img標簽設置屬性 var placeholder = document.createElement("img"); placeholder.setAttribute("id", "placeholder"); placeholder.setAttribute("src", "img/200u0l000000d8n8xB0E3_R_550_412.jpg"); placeholder.setAttribute("alt", "第一張圖片"); //創建一個p標簽給他設置屬性 var description = document.createElement("p"); description.setAttribute("id", "description"); var desctext = document.createTextNode("第一張圖片"); description.appendChild(desctext); // 將創建好的標簽插入HTML文檔中 var gallery = document.getElementById("imagegallery"); insertAfter(placeholder, gallery); insertAfter(description, placeholder); } //給a標簽綁定點擊事件 function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var galley = document.getElementById("imagegallery"); var links = galley.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { links[i].onclick = function() { return showPic(this); } links[i].onkeypress = links[i].onclick; } } //點擊後執行的函數 function showPic(whichpic) { if (!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); if (!document.getElementById("placeholder")) return false; if (whichpic.getAttribute("title")) { var text = whichpic.getAttribute("title"); } else { text = ""; } var description = document.getElementById("description"); //判斷P標簽中的節點類型 3為文本類型#text 設置文本 if (description.firstChild.nodeType == 3) { description.firstChild.nodeValue = text; } return false; }
HTML代碼
<!DOCTYPE html> <html> <head> <title>圖片庫效果</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h1>點擊圖片效果</h1> <ul id="imagegallery"> <li> <a href="img/200u0l000000d8n8xB0E3_R_550_412.jpg" title="第一張圖"> <img src="img/200u0l000000d8n8xB0E3_R_550_412.jpg" alt="fffd"> </a> </li> <li> <a href="img/20080o000000f95k889B2_R_550_412.jpg" title="第二張圖"> <img src="img/20080o000000f95k889B2_R_550_412.jpg" alt="bbf"> </a> </li> <li> <a href="img/200h0d0000006tsrr8195_R_550_412.jpg" title="第三張圖"> <img src="img/200h0d0000006tsrr8195_R_550_412.jpg" alt="fff "> </a> </li> <li> <a href="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" title="第四張圖"> <img src="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" alt="fff "> </a> </li> </ul> <script type="text/javascript" src="js/script.js"></script> </body> </html>
CSS代碼
h1{ width: 290px; margin: 0 auto; height: 60px; line-height: 60px; text-align: center; color: #13af13; } #imagegallery{ width: 290px; height: 50px; margin: 0 auto; padding: 5px 0 0 0; background-color: #e2e2e2; } #imagegallery li{ float: left; width: 60px; list-style: none; margin-left: 10px; } #imagegallery img ,#imagegallery a{ text-decoration: none; font-style: normal; display: block; width: 100%; } #placeholder{ display: block; border: 4px solid #13af13; width: 282px; margin: 0 auto; } p{ text-align: center; }
