頁面內容：一個按鈕標簽 一個Img標簽
實現原理：通過修改Img標簽的src屬性，實現圖片的切換
備注：代碼中flag變量僅僅用作標記，也可以直接用Img標簽的src屬性進行判斷，不過在判斷時候不能直接寫成
pics.src=='img/b.jpg';，需要加入當前域名
本博文只是一個簡單的實現邏輯，在大型網站中使用方法還沒深究，
小白一個，才開始接觸前端開發，希望能找到更多大神一起交流，給我指導。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像切換源碼</title> 6 </head> 7 <body> 8 <button type="button" id="toggle">點我</button><br/> 9 <img src="img/a.jpg" id="pic" width="400px" height="300px"> 10 11 <!-- 現在開始給“點我”按鈕注冊事件 --> 12 <script type="text/javascript"> 13 //1.獲取按鈕元素 14 var btn=document.getElementById('toggle'); 15 16 //獲取圖片元素,只要對其src屬性修改就可以改變圖片 17 //pics.src就是圖片的路徑,因為DOM獲取圖片元素的時候,將圖片的屬性和方法都已經封存在元素內部,修改元素,就是修改圖片元素 18 var pics=document.getElementById('pic'); 19 20 21 //2.給按鈕注冊事件 22 console.log(typeof(pics.src)); 23 var flag=1; 24 btn.onclick=function(){ 25 //事件名:click 26 //注冊事件:onclick 27 //備注:事件不是函數和方法,所以不需要加括號 28 //3.切換圖片 29 if(flag==1){ 30 pics.src='img/b.jpg'; 31 flag=2; 32 } 33 else{ 34 pics.src='img/a.jpg'; 35 flag=1; 36 } 37 } 38 39 </script> 40 </body> 41 </html>
頁面效果如下：
頁面1
頁面2