本人对前端比较感兴趣，就自学JavaScript，这是学习了语法和一点DOM知识后的一个练习。
HTML
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/main.js"></script> 7 <link rel="stylesheet" href="css/main.css"> 8 </head> 9 <body> 10 <div id="hd"> 11 <ul id="imagegallery"> 12 <li><a href="img/b1.jpg" title="GTA5img1"><img src="img/s1.jpg" width="228" alt="侠盗飞车5图1"></a> 13 </li> 14 <li><a href="img/b2.jpg" title="GTA5img2"><img src="img/s2.jpg" width="228" alt="侠盗飞车5图2"></a> 15 </li> 16 <li><a href="img/b3.jpg" title="GTA5img3"><img src="img/s3.jpg" width="228" alt="侠盗飞车5图3"></a> 17 </li> 18 <li><a href="img/b4.jpg" title="GTA5img4"><img src="img/s4.jpg" width="228" alt="侠盗飞车5图4"></a> 19 </li> 20 </ul> 21 </div> 22 <img src="img/zw.png" alt="占位图片" id="placeholder"> 23 <p id="description">选择一个图片</p> 24 </body> 25 </html>
JavaScript
1 /** 2 * Created by wangyu on 2017-04-21. 3 */ 4 5 function showPic(whichpic) { 6 if (!document.getElementById("placeholder")) return false; 7 var source = whichpic.getAttribute("href"); 8 var placeholder = document.getElementById("placeholder"); 9 placeholder.setAttribute("src", source); 10 if (document.getElementById("description")) { 11 if (whichpic.getAttribute("title")) { 12 var text = whichpic.getAttribute("title"); 13 } else { 14 var text = ""; 15 } 16 var description = document.getElementById("description"); 17 if (description.firstChild.nodeType == 3) { 18 description.firstChild.nodeValue = text; 19 } 20 return false; 21 } 22 } 23 24 function prepareGallery() { 25 if (!document.getElementsByTagName) return false; 26 if (!document.getElementById) return false; 27 if (!document.getElementById("imagegallery")) return false; 28 var gallery = document.getElementById("imagegallery"); 29 var links = gallery.getElementsByTagName("a"); 30 for ( var i=0; i < links.length; i++) { 31 links[i].onclick = function() { 32 return showPic(this); 33 } 34 links[i].onkeypress = links[i].onclick; 35 } 36 } 37 38 function addLoadEvent(func) { 39 var oldonload = window.onload; 40 if (typeof window.onload != 'function') { 41 window.onload = func; 42 } else { 43 window.onload = function() { 44 oldonload(); 45 func(); 46 } 47 } 48 } 49 50 addLoadEvent(prepareGallery);
CSS
1 #hd ul{ 2 text-align: center; 3 list-style-type: none; 4 } 5 li{ 6 float: left; 7 padding: 16px; 8 list-style-type: none; 9 display: inline; 10 } 11 #placeholder{ 12 padding-left: 170px; 13 }