【JavaScript】纯js-小案例：带缩略图的图片轮换

今天整理文件时找到了之前做的一些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">&lt</a>
172             <a href="javascript:;" id="next">&gt</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>

View Code

原理：

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的原因）。