10.美女相册

10.美女相册1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title></title>6&lt

大家好,欢迎来到IT知识分享网。10.美女相册"

  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://yundeesoft.com/33526.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信