這幾天一直在學習和復習js最基礎的東西，因為博主的基礎很薄弱，所以正在一點點的學習。。
今天來用js實現一個最簡單的相冊。請看下圖
像不像你媽媽的相冊或者是你媽媽的頭像。。。。話不多說，上代碼
<!DOCTYPE html> <html> <head lang="en"> <title>相冊</title> </head> <body> <h2>相冊</h2> <div id="imagegallery"> <a href="1.jpg" title="圖片A"> <img src="1.jpg" width="100" alt="圖片1" /> </a> <a href="2.jpg" title="圖片B"> <img src="2.jpg" width="100" alt="圖片2" /> </a> <a href="3.jpg" title="圖片C"> <img src="3.jpg" width="100" alt="圖片3" /> </a> <a href="4.jpg" title="圖片D"> <img src="4.jpg" width="100" alt="圖片4" /> </a> </div> <div style="clear:both;"></div> <img id="image" src="1.jpg" alt="" width="450px" /> <p id="des">選擇一個圖片</p> <script> //1 獲取所有的a標簽 對應的元素 var imagegallery = document.getElementById('imagegallery'); var links = imagegallery.getElementsByTagName('a'); //2 給所有的a標簽注冊點擊事件 var i = 0; len = links.length; for (; i < len; i++){ //獲取當前元素 var link =links[i]; link.onclick = function(){ //3切換圖片和文字 var image = document.getElementById('image'); var des = document.getElementById('des'); //設置圖片 image.src = this.href;//這塊不能用link原因是在執行click事件的時候循環已經執行完了 //設置文字 des.innerText = this.title //取消默認行為的執行 return false; } } </script> </body> </html>
以上就是全部的內容，這里面包含了幾個基礎的點，在上面的內容里都有具體的注釋。