- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- body {
- font-family: "Helvetica", "Arial", serif;
- color: #333;
- background-color: #ccc;
- margin: 1em 10%;
- }
- h1 {
- color: #333;
- background-color: transparent;
- }
- a {
- color: #c60;
- background-color: transparent;
- font-weight: bold;
- text-decoration: none;
- }
- ul {
- padding: 0;
- }
- li {
- float: left;
- padding: 1em;
- list-style: none;
- }
- #imagegallery {
- list-style: none;
- }
- #imagegallery li {
- margin: 0px 20px 20px 0px;
- padding: 0px;
- display: inline;
- }
- #imagegallery li a img {
- border: 0;
- }
- </style>
- </head>
- <body>
- <h2>
- 美女画廊
- </h2>
- <ul id="imagegallery">
- <li><a href="../images/1.jpg" title="美女 A">
- <img src="../images/1-small.jpg" width="100" alt="美女 1"/>
- </a></li>
- <li><a href="../images/2.jpg" title="美女 B">
- <img src="../images/2-small.jpg" width="100" alt="美女 2"/>
- </a></li>
- <li><a href="../images/3.jpg" title="美女 C">
- <img src="../images/3-small.jpg" width="100" alt="美女 3"/>
- </a></li>
- <li><a href="../images/4.jpg" title="美女 D">
- <img src="../images/4-small.jpg" width="100" alt="美女 4"/>
- </a></li>
- </ul>
- <div style="clear:both"></div>
- <!-- 显示大图的 -->
- <img id="image" src="../images/placeholder.png" alt=""width="450"/>
- <p id="des"> 选择一个图片 </p>
- <script src="common.js"></script>
- <script>
- var aObj = my$("imagegallery").getElementsByTagName("a");
- for(var i = 0; i<aObj.length; i++) {
- // 为每个 a 标签注册点击事件
- aObj[i].onclick = function () {
- // 为 id 为 image 的标签的 src 赋值
- my$("image").src = this.href;
- // 为 p 标签赋值
- my$("des").innerText = this.title;
- // 阻止超链接的默认跳转
- return false;
- };
- }
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2695948.html