今天整理文件时找到了之前做的一些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>