10.美女相册

最新推荐文章于 2019-05-06 17:08:21 发布

a18740351964

最新推荐文章于 2019-05-06 17:08:21 发布

阅读量365

点赞数

原文链接：http://www.cnblogs.com/BingBing-Deng/p/10427118.html

版权

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         body {
  8             font-family: "Helvetica", "Arial", serif;
  9             color: #333;
 10             background-color: #ccc;
 11             margin: 1em 10%;
 12         }
 13 
 14         h1 {
 15             color: #333;
 16             background-color: transparent;
 17         }
 18 
 19         a {
 20             color: #c60;
 21             background-color: transparent;
 22             font-weight: bold;
 23             text-decoration: none;
 24         }
 25 
 26         ul {
 27             padding: 0;
 28         }
 29 
 30         li {
 31             float: left;
 32             padding: 1em;
 33             list-style: none;
 34         }
 35 
 36         #imagegallery {
 37 
 38             list-style: none;
 39         }
 40 
 41         #imagegallery li {
 42             margin: 0px 20px 20px 0px;
 43             padding: 0px;
 44             display: inline;
 45         }
 46 
 47         #imagegallery li a img {
 48             border: 0;
 49         }
 50     </style>
 51 
 52 </head>
 53 <body>
 54 <h2>
 55     美女画廊
 56 </h2>
 57 <a href="#">注册</a>
 58 <ul id="imagegallery">
 59     <li>
 60         <a href="image/1.jpg" title="美女A">
 61             <img src="image/1-small.jpg" width="100" alt="美女1"/>
 62         </a>
 63     </li>
 64     <li>
 65         <a href="image/2.jpg" title="美女B">
 66             <img src="image/2-small.jpg" width="100" alt="美女2"/>
 67         </a>
 68     </li>
 69     <li>
 70         <a href="image/3.jpg" title="美女C">
 71             <img src="image/3-small.jpg" width="100" alt="美女3"/>
 72         </a>
 73     </li>
 74     <li>
 75         <a href="image/4.jpg" title="美女D">
 76             <img src="image/4-small.jpg" width="100" alt="美女4"/>
 77         </a>
 78     </li>
 79 </ul>
 80 
 81 
 82 <div style="clear:both"></div>
 83 
 84 <img id="image" src="image/placeholder.png" width="450px"/>
 85 
 86 <p id="des">选择一个图片</p>
 87 
 88 <script>
 89     //需求：点击小图片，改变下面的大图片的src属性值。赋值为a链接的href属性值。
 90         //让p标签的innnerHTML属性值，变成a标签的title属性值。
 91     //步骤：
 92     //1.获取事件源和相关元素
 93     //2.绑定事件
 94     //3.书写事件驱动程序
 95 
 96 
 97     //1.获取事件源和相关元素
 98     //利用元素获取其下面的标签。
 99     var ul = document.getElementById("imagegallery");
100     var aArr = ul.getElementsByTagName("a");
101 //    console.log(aArr[0]);
102     var img = document.getElementById("image");
103     var des = document.getElementById("des");
104     //2.绑定事件
105     //以前是一个一个绑定，但是现在是一个数组。for循环绑定
106     for(var i=0;i<aArr.length;i++){
107         aArr[i].onclick = function () {
108             //3.书写事件驱动程序
109             //修改属性
110             //this指的是函数调用者，和i并无关系，所以不会出错。
111             img.src = this.href;
112 //            img.src = aArr[i].href;
113             des.innerHTML = this.title;
114             return false;
115         }
116     }
117 
118 </script>
119 
120 </body>
121 </html>

转载于:https://www.cnblogs.com/BingBing-Deng/p/10427118.html

a18740351964

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.美女相册

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 ...
复制链接

扫一扫