JavaScript--轮播图_带计时器

轮播图效果：

实现的功能：

1.鼠标移入，左右按钮显示

2.右下叫小圆点鼠标移入，进入下一张图

3.左右按钮点击，右下小圆点页跟随变更

4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）

5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片

实现代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>总有人比你富有，却比你更聪明更努力！</title>
  6     <style type="text/css">
  7         /* css 重置 */
  8         * {
  9             margin: 0;
 10             padding: 0;
 11             list-style: none;
 12         }
 13 
 14         body {
 15             background: #fff;
 16             font: normal 12px/22px 宋体;
 17         }
 18 
 19         img {
 20             border: 0;
 21         }
 22 
 23         a {
 24             text-decoration: none;
 25             color: #333;
 26         }
 27 
 28         /* 本例子css */
 29         .slideBox {
 30              790px;
 31             height: 340px;
 32             overflow: hidden;
 33             position: relative;
 34             border: 1px solid #ddd;
 35             margin: 50px auto;
 36         }
 37 
 38         .bd .hd {
 39             height: 20px;
 40             overflow: hidden;
 41             position: absolute;
 42             right: 5px;
 43             bottom: 5px;
 44             z-index: 1;
 45         }
 46 
 47         .bd .hd ul {
 48             overflow: hidden;
 49             zoom: 1;
 50             float: left!important;
 51         }
 52 
 53         .bd .hd ul li {
 54             float: left;
 55             margin-right: 5px!important;
 56              20px;
 57             height: 20px;
 58             line-height: 20px;
 59             font-weight: bold;
 60             text-align: center;
 61             background: #fff;
 62             cursor: pointer;
 63             border-radius: 50%;
 64         }
 65 
 66         .bd .hd ul li.on {
 67             background: #f00;
 68             color: #fff;
 69         }
 70 
 71         .slideBox .bd {
 72             position: relative;
 73             height: 100%;
 74             z-index: 0;
 75         }
 76 
 77         /* -----------------------  */
 78         .slideBox .bd li {
 79             zoom: 1;
 80             vertical-align: middle;
 81             left: 0;
 82             top: 0;
 83         }
 84 
 85         .slideBox .bd li.first {
 86             z-index: 1;
 87         }
 88 
 89         /* -----------------------  */
 90         .slideBox .bd img {
 91              790px;
 92             height: 340px;
 93             display: block;
 94         }
 95 
 96         .slideBox .prev,
 97         .slideBox .next {
 98             position: absolute;
 99             left: 0;
100             top: 50%;
101             margin-top: -25px;
102             display: none;
103              32px;
104             height: 40px;
105             background: rgba(0,0,0,0.3);
106             filter: alpha(opacity=50);
107             opacity: 0.5;
108             text-align: center;
109             font-size: 30px;
110             font-weight: bold;
111             color: #fff;
112             line-height: 40px;
113         }
114 
115         .slideBox .next {
116             left: auto;
117             right: 0;
118             background-position: 8px 5px;
119         }
120 
121         .slideBox .prev:hover,
122         .slideBox .next:hover {
123             filter: alpha(opacity=100);
124             opacity: 1;
125         }
126 
127 
128     </style>
129 </head>
130 <body>
131 <div id="slideBox" class="slideBox">
132 
133     <div class="bd" id="bd">
134         <div class="hd">
135             <ul id="control">
136                 <li class="on"></li>
137                 <li></li>
138                 <li></li>
139                 <li></li>
140                 <li></li>
141             </ul>
142         </div>
143 
144         <ul>
145             <li><a href="#"><img id="bigImg" src="images/01.jpg"/></a></li>
146         </ul>
147         <a class="prev" id="prev" href="javascript:;" ><</a>
148         <a class="next" id="next" href="javascript:;">></a>
149     </div>
150 
151 </div>
152 </body>
153 </html>
154 <script>
155 
156     // 公共获取事件源函数
157     function $(id) {
158       return document.getElementById(id);
159     }
160     // 切换轮播图
161     function changImg(imgIndex) {
162         $('bigImg').src= imgArr[imgIndex];
163         console.log(imgIndex);
164         // 排他思想
165         for(var j = 0 ; j < liBtns.length ; j++) {
166             liBtns[j].className = "";
167         }
168         // 设置小红点样式
169         liBtns[imgIndex].className = 'on';
170     }
171     // 功能需求类似tab栏，也可参考线上轮播图效果
172     // 获取轮播图区
173     // 获取轮播图
174     var imgArr = [
175         "images/01.jpg",
176         "images/02.jpg",
177         "images/03.jpg",
178         "images/04.jpg",
179         "images/05.jpg"
180     ];
181     // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
182     $('bd').onmouseover = function () {
183         $('prev').style.display = "block";
184         $('next').style.display = "block";
185     }
186     $('bd').onmouseout = function () {
187         $('prev').style.display = "none";
188         $('next').style.display = "none";
189     }
190     // 记录当前图片下标-- 为了图片索引值同步
191     var imgIndex = 0;
192 
193 
194 
195     /* 计时器,3秒切换到下一张轮播图*/
196     var t; // 计时器变量
197     function interval() {
198         t = setInterval(
199             function () {
200                 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
201                 // 设置下一张图片
202                 changImg(imgIndex);
203             }
204             ,3000);
205     }
206 
207     // 鼠标移入圆点区，关闭计时器
208     $('control').onmouseover = function () {
209         clearInterval(t);
210     }
211     // 鼠标移开圆点区，开启计时器自动切换轮播图
212     $('control').onmouseout = function () {
213         interval();
214     }
215     // 鼠标移入上，下一张图片的按钮是关闭计时器
216     $('next').onmouseover = function () {
217         clearInterval(t);
218     }
219     $('prev').onmouseover = function () {
220         clearInterval(t);
221     }
222 
223     // 把鼠标移出上下一张图片区域,开启计时器
224     $('next').onmouseout = function () {
225         interval();
226     }
227     $('prev').onmouseout = function () {
228         interval();
229     }
230     interval();
231 
232 
233 
234     // 圆点鼠标移到上面图片轮播
235     var liBtns = $('control').getElementsByTagName('li');
236     for (var i = imgIndex ; i < liBtns.length ; i++) {
237         // 设置当前按钮下标
238         liBtns[i].index = i;
239         liBtns[i].onmouseover = function () {
240             changImg(this.index);
241             imgIndex = this.index;
242         }
243     }
244 
245     /*上下轮播图*/
246     // 下一张轮播图
247     $('next').onclick = function () {
248         // 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播
249         imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
250         // 设置下一张图片
251         changImg(imgIndex);
252 
253 
254     }
255     // 上一张轮播图
256     $('prev').onclick = function () {
257         // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
258         imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
259         // 设置上一张轮图片
260         changImg(imgIndex);
261     }
262 
263 
264 
265 
266 </script>

下面是轮播图的小红点是JS动态生成的：

主要与上面代码的区别是：  灰色代码区的HTML结构部分  黄色代码区域的JS部分

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>总有人比你富有，却比你更聪明更努力！</title>
  6     <style type="text/css">
  7         /* css 重置 */
  8         * {
  9             margin: 0;
 10             padding: 0;
 11             list-style: none;
 12         }
 13 
 14         body {
 15             background: #fff;
 16             font: normal 12px/22px 宋体;
 17         }
 18 
 19         img {
 20             border: 0;
 21         }
 22 
 23         a {
 24             text-decoration: none;
 25             color: #333;
 26         }
 27 
 28         /* 本例子css */
 29         .slideBox {
 30              790px;
 31             height: 340px;
 32             overflow: hidden;
 33             position: relative;
 34             border: 1px solid #ddd;
 35             margin: 50px auto;
 36         }
 37 
 38         .bd .hd {
 39             height: 20px;
 40             overflow: hidden;
 41             position: absolute;
 42             right: 5px;
 43             bottom: 5px;
 44             z-index: 1;
 45         }
 46 
 47         .bd .hd ul {
 48             overflow: hidden;
 49             zoom: 1;
 50             float: left!important;
 51         }
 52 
 53         .bd .hd ul li {
 54             float: left;
 55             margin-right: 5px!important;
 56              20px;
 57             height: 20px;
 58             line-height: 20px;
 59             font-weight: bold;
 60             text-align: center;
 61             background: #fff;
 62             cursor: pointer;
 63             border-radius: 50%;
 64         }
 65 
 66         .bd .hd ul li.on {
 67             background: #f00;
 68             color: #fff;
 69         }
 70 
 71         .slideBox .bd {
 72             position: relative;
 73             height: 100%;
 74             z-index: 0;
 75         }
 76 
 77         /* -----------------------  */
 78         .slideBox .bd li {
 79             zoom: 1;
 80             vertical-align: middle;
 81             left: 0;
 82             top: 0;
 83         }
 84 
 85         .slideBox .bd li.first {
 86             z-index: 1;
 87         }
 88 
 89         /* -----------------------  */
 90         .slideBox .bd img {
 91              790px;
 92             height: 340px;
 93             display: block;
 94         }
 95 
 96         .slideBox .prev,
 97         .slideBox .next {
 98             position: absolute;
 99             left: 0;
100             top: 50%;
101             margin-top: -25px;
102             display: none;
103              32px;
104             height: 40px;
105             background: rgba(0,0,0,0.3);
106             filter: alpha(opacity=50);
107             opacity: 0.5;
108             text-align: center;
109             font-size: 30px;
110             font-weight: bold;
111             color: #fff;
112             line-height: 40px;
113         }
114 
115         .slideBox .next {
116             left: auto;
117             right: 0;
118             background-position: 8px 5px;
119         }
120 
121         .slideBox .prev:hover,
122         .slideBox .next:hover {
123             filter: alpha(opacity=100);
124             opacity: 1;
125         }
126 
127 
128     </style>
129 </head>
130 <body>
131 <div id="slideBox" class="slideBox">
132 
133     <div class="bd" id="bd">
134         <div class="hd">
135             <ul id="control">
136 
137             </ul>
138         </div>
139 
140         <ul>
141             <li><a href="#"><img id="bigImg" src="images/01.jpg"/></a></li>
142         </ul>
143         <a class="prev" id="prev" href="javascript:;" ><</a>
144         <a class="next" id="next" href="javascript:;">></a>
145     </div>
146 
147 </div>
148 </body>
149 </html>
150 <script>
151     // 记录当前图片下标-- 为了图片索引值同步
152     var imgIndex = 0;
153     var t; // 计时器变量
154     // 公共获取事件源函数
155     function $(id) {
156       return document.getElementById(id);
157     }
158     // 切换轮播图
159     function changImg(imgIndex) {
160         $('bigImg').src= imgArr[imgIndex];
161         console.log(imgIndex);
162         // 排他思想
163         for(var j = 0 ; j < liBtns.length ; j++) {
164             liBtns[j].className = "";
165         }
166         // 设置小红点样式
167         liBtns[imgIndex].className = 'on';
168     }
169     // 功能需求类似tab栏，也可参考线上轮播图效果
170     // 获取轮播图区
171     // 获取轮播图
172     var imgArr = [
173         "images/01.jpg",
174         "images/02.jpg",
175         "images/03.jpg",
176         "images/04.jpg",
177         "images/05.jpg"
178     ];
179 
180     //自动生成li
181     // 默认设置第一个li的className是on
182     // 生成第一个默认li带并设置className = "on"
183     var liArr = [];
184     for(var i = 0 ; i < imgArr.length ; i++ ) {
185         liArr.push('<li></li>')
186     }
187     // 转换成字符串
188     $('control').innerHTML = liArr.join('');
189     // 设置属性
190     $('control').children[0].setAttribute("class","on")
191 
192 
193 
194     // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
195     $('bd').onmouseover = function () {
196         $('prev').style.display = "block";
197         $('next').style.display = "block";
198     }
199     $('bd').onmouseout = function () {
200         $('prev').style.display = "none";
201         $('next').style.display = "none";
202     }
203 
204 
205     //下一张图片函数提取
206     function nextImg() {
207         imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
208         // 设置下一张图片
209         changImg(imgIndex);
210     }
211 
212     /* 计时器,3秒切换到下一张轮播图*/
213 
214     function interval() {
215         t = setInterval(nextImg,3000);
216     }
217 
218     // 鼠标移入圆点区，关闭计时器
219     $('control').onmouseover = function () {
220         clearInterval(t);
221     }
222     // 鼠标移开圆点区，开启计时器自动切换轮播图
223     $('control').onmouseout = function () {
224         interval();
225     }
226     // 鼠标移入上，下一张图片的按钮是关闭计时器
227     $('next').onmouseover = function () {
228         clearInterval(t);
229     }
230     $('prev').onmouseover = function () {
231         clearInterval(t);
232     }
233 
234     // 把鼠标移出上下一张图片区域,开启计时器
235     $('next').onmouseout = function () {
236         interval();
237     }
238     $('prev').onmouseout = function () {
239         interval();
240     }
241     interval();
242 
243 
244 
245     // 圆点鼠标移到上面图片轮播
246     var liBtns = $('control').getElementsByTagName('li');
247     for (var i = imgIndex ; i < liBtns.length ; i++) {
248         // 设置当前按钮下标
249         liBtns[i].index = i;
250         liBtns[i].onmouseover = function () {
251             changImg(this.index);
252             imgIndex = this.index;
253         }
254     }
255 
256     /*上下轮播图*/
257     // 下一张轮播图
258     $('next').onclick = nextImg;
259     // 上一张轮播图
260     $('prev').onclick = function () {
261         // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
262         imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
263         // 设置上一张轮图片
264         changImg(imgIndex);
265     }
266 
267 
268 
269 
270 
271 
272 </script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mrszhou/p/7667448.html