利用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>
效果圖如下(就隨便截了兩張,更多效果自己嘗試一下):