JavaScript--轮播图_带计时器
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 width: 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 width: 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 width: 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 width: 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 width: 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 width: 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 width: 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 width: 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 = thisJavaScript实现移动端轮播图效果