利用JS實現圖片切換
阿新 • • 發佈：2018-11-21
事件舉例:
1.要求實現效果：當滑鼠懸停在照片上時更換為另一張照片；當滑鼠離開時，還原為本來的圖片。
說明：
1.一般來說對於一個事件問題處理起來分為三個步驟：
（1）獲取事件
（2）繫結事件
（3）書寫事件驅動程式
程式碼如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>實戰</title> <style type="text/css"> *{ margin:0px; padding:0px;//清除預設樣式 } img{ cursor:pointer;/*定義滑鼠的形狀，滑鼠形狀為小手*/ border:1px #66FFFF solid;/*給圖片設定一個邊框*/ } </style> <script type="text/javascript"> //onload的作用是等事件載入完以後才執行此程式 window.onload=function() { //獲取事件 var img1=document.getElementById("tp"); //繫結事件 img1.onmousemove=function() { img1.src="img/7.jpg";//事件驅動程式（修改img的src屬性，移入為新的照片） }; //獲取事件 var img2=document.getElementById("tp"); //繫結事件 img2.onmouseout=function() { img2.src="img/2.jpg";//事件驅動程式（修改img的src屬性，移除為原照片） }; }; </script> </head> <body> <img src="img/2.jpg" id="tp"> </body> </html>
效果圖如下（因為我不會上傳動態效果所以想要看真正效果的可以自己試試）：
此圖為滑鼠離開時的圖片
此圖為滑鼠移入時的圖片
2.當點選按鈕時會實現圖片的切換
說明：圖片切換的實質就是改變圖片（img）的src屬性
<!doctype html> <html> <head> <meta charset="utf-8"> <title>實戰</title> <style type="text/css"> *{ margin:0px; padding:0px; } #outer{ width:426px;/*圖片的寬高度自適應*/ padding:10px;/*內邊距為10*/ margin:50px auto;/*讓整個div居中*/ background-color:#66FFFF;/*設定背景顏色*/ text-align:center;/*使按鈕居中*/ } </style> <script type="text/javascript"> //onload的作用是等事件載入完以後才執行此程式 window.onload=function() { //獲取按鈕事件 var bt1=document.getElementById("pre"); var bt2=document.getElementById("next"); //獲取img標籤中的第一個元素結點 var img=document.getElementsByTagName("img")[0]; //建立一個數組用來儲存圖片的路徑（即src屬性） var imgarr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; //設定陣列的索引下標 var index=0; //獲取p標籤 var pbq=document.getElementById("pid"); //設定提醒文字 pbq.innerHTML="共有"+imgarr.length+"張圖片,當前第"+(index+1)+"張"; //繫結事件 bt1.onclick=function() { //書寫事件驅動程式 index--;//切換到上一張索引自減 //判斷索引是否小於0 if(index<0) { index=imgarr.length-1;//目的是可以實現迴圈切換 } //修改img的src屬性 img.src=imgarr[index]; //當點選按鈕以後，重新設定p標籤中的顯示內容 pbq.innerHTML="共有"+imgarr.length+"張圖片,當前第"+(index+1)+"張"; }; //繫結事件 bt2.onclick=function() { //書寫事件驅動程式 index++;//切換到下一張索引自加 //判斷索引是否大於4 if(index>imgarr.length-1) { index=0;//目的是可以實現迴圈切換 } //修改img的src屬性 img.src=imgarr[index]; //當點選按鈕以後，重新設定p標籤中的顯示內容 pbq.innerHTML="共有"+imgarr.length+"張圖片,當前第"+(index+1)+"張"; }; }; </script> </head> <body> <div id="outer"> <p id="pid"></p> <!--作用是顯示當圖片是第幾張圖片--> <img src="img/1.jpg"> <button id="pre">上一張</button> <button id="next">下一張</button> </div> </body> </html>
效果圖如下（就隨便截了兩張，更多效果自己嘗試一下）：
