特殊的圖片輪換特效 一、實現效果 如上圖： 1、圖片自動依次輪換，每輪換到一張圖片，下麵對應的小圖標出現紅色邊框，並顯示對應的圖片名稱 2、滑鼠放到大圖片上面的時，圖片停止輪換，一直顯示當前圖片；滑鼠移開後圖片繼續輪換 3、滑鼠移到小圖標上時，大圖片區域會顯示對應的大圖；滑鼠移開則從當前圖片開始繼續 ...
特殊的圖片輪換特效
一、實現效果
如上圖：
1、圖片自動依次輪換，每輪換到一張圖片，下麵對應的小圖標出現紅色邊框，並顯示對應的圖片名稱
2、滑鼠放到大圖片上面的時，圖片停止輪換，一直顯示當前圖片；滑鼠移開後圖片繼續輪換
3、滑鼠移到小圖標上時，大圖片區域會顯示對應的大圖；滑鼠移開則從當前圖片開始繼續輪換
二、代碼
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>帶小圖標的JS圖片輪換</title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 #content{ 12 width: 700px; 13 height: 538px; 14 margin: 0px auto; /*使所有內容居中*/ 15 border: solid #F0F0F0; 16 } 17 18 /*定義下麵小圖標處樣式*/ 19 #nav1 table{ 20 width: 100%; 21 height: 35px; 22 margin-top: -4px; 23 } 24 #nav1 td{ 25 width: 35px; 26 height: 35px; 27 text-align: center; /*文字居中*/ 28 color: #ffffff; 29 } 30 #text{ 31 32 } 33 #_text{ 34 width: 100%; 35 height: 100%; 36 background-color: #F0F0F0; 37 border: none; 38 text-align: center; 39 font-size: 18px; 40 color: #000000; 41 font-weight: bold; 42 } 43 </style> 44 </head> 45 <body onload="changeImg()"> 46 <div id="content"> 47 <div id="images"> 48 <img id="_photoes" src="../images/textPhoto/1.jpg" height="500px" width="700px" onmouseover="over1()" onmouseout="out1()"> 49 </div> 50 <div id="nav1"> 51 <table border="0"> 52 <tr> 53 <td id="text" bgcolor="#F0F0F0" colspan="15"><input type="text" id="_text" readonly></td> 54 <td id="img1" class="sImg" bgcolor="#db7093" onmouseover="over2(1)" onmouseout="out2(1)">1</td> 55 <td id="img2" class="sImg" bgcolor="#da70d6" onmouseover="over2(2)" onmouseout="out2(2)">2</td> 56 <td id="img3" class="sImg" bgcolor="#9acd32" onmouseover="over2(3)" onmouseout="out2(3)">3</td> 57 <td id="img4" class="sImg" bgcolor="#adff2f" onmouseover="over2(4)" onmouseout="out2(4)">4</td> 58 <td id="img5" class="sImg" bgcolor="#00bfff" onmouseover="over2(5)" onmouseout="out2(5)">5</td> 59 </tr> 60 </table> 61 </div> 62 </div> 63 64 <script type="text/javascript"> 65 //將輪換的大圖片放入數組中 66 var arr = new Array(); 67 arr[0] = "../images/textPhoto/1.jpg"; 68 arr[1] = "../images/textPhoto/2.jpg"; 69 arr[2] = "../images/textPhoto/3.jpg"; 70 arr[3] = "../images/textPhoto/4.jpg"; 71 arr[4] = "../images/textPhoto/5.jpg"; 72 73 //將input區域變換的文字放在數組裡 74 var text = new Array(); 75 text[0] = "焦點圖1"; 76 text[1] = "焦點圖2"; 77 text[2] = "焦點圖3"; 78 text[3] = "焦點圖4"; 79 text[4] = "焦點圖5"; 80 81 var smallImg = document.getElementsByClassName("sImg"); //將頁面上所有小圖片存放在一個數組 82 83 var num = 0; 84 function changeImg() { 85 document.getElementById("_photoes").src = arr[num]; 86 document.getElementById("_text").value = text[num]; 87 //當前小圖標增加邊框樣式 88 for(var i=0;i<arr.length;i++) { 89 if(i==num) smallImg[num].style.border = "red solid"; //大圖標對應的小圖標增加邊框樣式 90 else smallImg[i].style.border = "none"; 91 } 92 if (num == arr.length - 1) num = 0; //如果顯示的是最後一張圖片，則圖片序號變為第一張的序號 93 else num += 1; //圖片序號加一 94 } 95 96 var setID = setInterval("changeImg()",1000); //這樣寫任然會不斷調用changeImg()函數 97 98 /*當滑鼠滑到大圖標上時*/ 99 function over1() { 100 clearInterval(setID); //圖片停止輪換 101 // smallImg[n-1].style.border = "red solid"; 102 } 103 104 /*當滑鼠離開大圖標時*/ 105 function out1() { 106 setID = setInterval("changeImg()",1000); //圖片繼續輪換 107 // smallImg[n-1].style.border = "none"; //大圖標對應的小圖標邊框樣式取消 108 } 109 110 /*當滑鼠滑到小圖標上時*/ 111 function over2(n) { 112 document.getElementById("_photoes").src = arr[n-1]; //只要滑鼠滑到小圖標上，大圖區域就顯示對應的圖片 113 document.getElementById("_text").value = text[n-1]; 114 clearInterval(setID); //圖片停止輪換 115 //當前小圖標增加邊框樣式 116 for(var i=0;i<arr.length;i++) { 117 if(i==n-1) smallImg[n-1].style.border = "red solid"; 118 else smallImg[i].style.border = "none"; 119 } 120 } 121 122 /*當滑鼠離開小圖標時*/ 123 function out2(n) { 124 if(n!=arr.length) 125 num = n; //從當前圖片開始輪換 126 else num = 0; 127 setID = setInterval("changeImg()",1000); //圖片繼續輪換 128 // smallImg[n-1].style.border = "none"; //小圖標邊框樣式取消 129 } 130 </script> 131 </body> 132 </html>View Code
