美女輪播圖 · JavaScript

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container { overflow: hidden; width: 520px; margin-left: 50px; } a { height: 130px; width: 200px; float: left; margin: 5px; } img { width: 100%; } </style> </head> <body> <div id="container"> <h2>美女畫廊</h2> <div> <a href="images/1(1).jpg" title="美女A"><img src="images/1-small.jpg" alt=""></a> <a href="images/2.jpg" title="美女B"><img src="images/2-small.jpg" alt=""></a> <a href="images/3.jpg" title="美女C"><img src="images/3-small.jpg" alt="美女C"></a> <a href="images/4.jpg" title="美女D"><img src="images/4-small.jpg" alt="美女D"></a> </div> <div> <img id="image" src="images/placeholder.png" alt=""> </div> <h4 id="des">選擇一個圖片</h4> </div> <script> var as = document.getElementById('container'); var links = as.getElementsByTagName('a'); for (let i = 0; i < links.length; i++) { var link = links[i]; link.onclick = function () { var img = document.getElementById('image'); img.src = this.href; //這里的this指的是當前點擊的a標簽 var des = document.getElementById('des'); des.innerHTML = this.title; return false; } } </script> </body> </html> ```