王雨的JavaScript练习01---js幻灯（纯手打）

本人对前端比较感兴趣，就自学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 }

 

posted @ 2017-05-03 21:33  王雨的博客  阅读(198)  评论(0)  编辑  收藏  举报