今天整理文件時找到了之前做的一些js練習，里面的帶縮略圖的圖片輪換正好跟我之前做的banner輪播有點像。就又看了一遍，添加了一些注釋。
效果如下：
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>帶縮略圖的圖片輪換</title> 7 8 <style type="text/css"> 9 body,p,ul{padding: 0;margin: 0;} 10 img{border: 0; vertical-align: middle;} 11 12 body { 13 width: 500px; 14 margin: 50px auto; 15 background: #000; 16 } 17 18 #p1 { 19 color: white; 20 font-size: 24px; 21 line-height: 24px; 22 text-align: center; 23 } 24 25 #box { 26 position: relative; 27 width: 500px; 28 height: 400px; 29 margin-top: 30px; 30 background: #5d5151; 31 text-align: center; 32 } 33 34 a { 35 width: 40px; 36 height: 40px; 37 position: absolute; 38 top: 175px; 39 font-size: 20px; 40 text-decoration: none; 41 line-height: 40px; 42 text-align: center; 43 color: #fff; 44 background: #ffc107; 45 border-radius: 50%; 46 opacity: 0.6; 47 } 48 49 a:hover { 50 opacity: 1; 51 transform: scale(1.2); 52 } 53 54 #prev { 55 left: 60px; 56 } 57 58 #next { 59 right: 60px; 60 } 61 62 #img { 63 width: 400px; 64 height: 300px; 65 margin-top: 30px; 66 } 67 68 #btn { 69 width: 120px; 70 list-style: none; 71 margin: 10px auto; 72 } 73 74 #btn li { 75 width: 20px; 76 height: 20px; 77 border-radius: 50%; 78 background: #928c8c; 79 float: left; 80 margin-left: 10px; 81 position: relative; 82 } 83 84 #btn .active { 85 background: #ffc107; 86 } 87 88 #btn img { 89 width: 100px; 90 height: 100px; 91 border: 5px solid #fff; 92 position: absolute; 93 bottom: 30px; 94 display: none; 95 left: -40px; 96 } 97 </style> 98 99 <script type="text/javascript"> 100 window.onload = function () { 101 //大圖路徑 102 var arrUrl = ['img/bassist.jpg', 'img/concert.jpg', 'img/crowd.jpg', 'img/guitarist.jpg']; 103 //縮略圖路徑 104 var arrlitUrl = ['img/thumbnail_bassist.jpg', 'img/thumbnail_concert.jpg', 'img/thumbnail_crowd.jpg', 'img/thumbnail_guitarist.jpg']; 105 106 var num = 0; 107 108 var Oimg = document.getElementById('img'); 109 var Oul = document.getElementById('btn'); 110 var Oli = Oul.getElementsByTagName('li'); 111 //前一張，后一張 112 var Oprev = document.getElementById('prev'); 113 var Onext = document.getElementById('next'); 114 115 116 // Oimg[num].src = arrUrl[num]; 117 // Olitimg[num].src = arrlitUrl[num]; 118 119 //小圓圈即li標簽顏色樣式 120 function turnactive(nu) { 121 for (var i = 0; i < arrUrl.length; i++) { 122 Oli[i].className = ''; 123 } 124 Oli[nu].className = 'active'; 125 } 126 //前一張點擊事件 127 Oprev.onclick = function () { 128 num--; 129 if (num == -1) { 130 num = arrUrl.length - 1; 131 } 132 Oimg.src = arrUrl[num]; 133 turnactive(num); 134 } 135 //后一張點擊事件 136 Onext.onclick = function () { 137 num++; 138 if (num == arrUrl.length) { 139 num = 0; 140 } 141 Oimg.src = arrUrl[num]; 142 turnactive(num); 143 } 144 //給每個小圓圈li添加事件 145 for (var i = 0; i < arrlitUrl.length; i++) { 146 //給每個小圓圈li添加索引 147 Oli[i].index = i; 148 //每當鼠標移入li標簽時，顯示對應的縮略圖 149 Oli[i].onmouseover = function () { 150 this.getElementsByTagName('img')[0].style.display = 'block'; 151 this.getElementsByTagName('img')[0].src = arrlitUrl[this.index]; 152 } 153 //每當鼠標移出li標簽時，隱藏縮略圖 154 Oli[i].onmouseout = function () { 155 this.getElementsByTagName('img')[0].style.display = 'none'; 156 } 157 //鼠標點擊時更換圖片為對應的圖片 158 Oli[i].onclick = function () { 159 Oimg.src = arrUrl[this.index]; 160 turnactive(this.index); 161 } 162 } 163 164 } 165 </script> 166 </head> 167 168 <body> 169 <p id="p1">帶縮略圖的圖片輪換</p> 170 <div id="box"> 171 <a href="javascript:;" id="prev"><</a> 172 <a href="javascript:;" id="next">></a> 173 <img src="img/bassist.jpg" id="img" /> 174 <ul id="btn"> 175 <li class="active"> 176 <img src="img/loader_ico.gif" /> 177 </li> 178 <li> 179 <img src="img/loader_ico.gif" /> 180 </li> 181 <li> 182 <img src="img/loader_ico.gif" /> 183 </li> 184 <li> 185 <img src="img/loader_ico.gif" /> 186 </li> 187 </ul> 188 </div> 189 </body> 190 191 </html>
原理：
- html結構：
- 標題p1
- 圖片框 box
- 大圖img
- 小圓圈 li 》縮略圖
- 前后切換prev 和 next
- css 布局：
- 標題和圖片框正常放；
- 前后切換的btn需要用相對定位absolute放到圖片框的左右兩側，添加hover顏色變換
- 小圓圈組ul放在圖片框正中下方，li均勻排列；添加calss：active樣式設置選中li；
- 縮略圖相對定位absolute到對應的小圓圈li上方。
- 默認縮略圖不顯示display：none；
- javascript：
- 首先用兩個數組放對應圖片路徑，大圖和縮略圖；也可以只用一組圖片，只是在css中設置一下縮略圖的大小就好。
- 然后獲取大圖標簽Oimg，小圓圈數組Oli，前一張Oprev，后一張Onext；
- 給Oprev和Onext添加點擊事件，用num來記錄當前為第幾張作為判斷條件，超出數值做相應處理，然后改變Oimg的圖片路徑即可。
- 最后給每個小圓圈Oli添加事件，因為js先執行for循環為每個Oli注冊事件，而事件執行是等用戶操作觸發的，所以需要添加索引index來記錄是第幾個，在事件函數中使用。
- 鼠標移入：顯示Oli下對應的縮略圖display：block；設置圖片路徑；
- 鼠標移出：隱藏Oli下對應的縮略圖display：none；
- 鼠標點擊：修改Oimg的圖片路徑顯示對應的圖片。
- 注意：Oimg顯示為第幾張圖片，對應的第幾個小圓圈Oli需要顯示，我們定義一個函數turnactive（i），只需傳入序號即可將其他小圓圈OIi的active樣式去除，設置第i個Oli為active（這就是定義樣式active的原因）。