JavaScript--缓动运动+轮播图
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript--缓动运动+轮播图相关的知识，希望对你有一定的参考价值。
上效果：
实现步骤：
最重要的是运动公式！！！
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 width: 16%; 46 } 47 48 .bd .hd ul { 49 /*overflow: hidden;*/ 50 zoom: 1; 51 float: left!important; 52 } 53 54 .bd .hd ul li { 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 float: left; 65 66 } 67 68 .bd .hd ul li.on { 69 background: #f00; 70 color: #fff; 71 72 } 73 74 .slideBox .bd { 75 position: relative; 76 height: 100%; 77 z-index: 0; 78 } 79 80 .slideBox .bd ul{ 81 float: left!important; 82 width: 600%; 83 position: absolute; 84 } 85 86 /* ----------------------- */ 87 .slideBox .bd li { 88 zoom: 1; 89 vertical-align: middle; 90 left: 0; 91 top: 0; 92 float: left; 93 } 94 95 /*.slideBox .bd li.first {*/ 96 /*z-index: 1;*/ 97 /*}*/ 98 99 /* ----------------------- */ 100 .slideBox .bd img { 101 width: 790px; 102 height: 340px; 103 display: block; 104 } 105 106 .slideBox .prev, 107 .slideBox .next { 108 position: absolute; 109 left: 0; 110 top: 50%; 111 margin-top: -25px; 112 display: none; 113 width: 32px; 114 height: 40px; 115 background: rgba(0,0,0,0.3); 116 filter: alpha(opacity=50); 117 opacity: 0.5; 118 text-align: center; 119 font-size: 30px; 120 font-weight: bold; 121 color: #fff; 122 line-height: 40px; 123 } 124 125 .slideBox .next { 126 left: auto; 127 right: 0; 128 background-position: 8px 5px; 129 } 130 131 .slideBox .prev:hover, 132 .slideBox .next:hover { 133 filter: alpha(opacity=100); 134 opacity: 1; 135 } 136 137 138 </style> 139 </head> 140 <body> 141 <div id="slideBox" class="slideBox"> 142 143 <div class="bd" id="bd"> 144 <div class="hd"> 145 <ul id="control"></ul> 146 </div> 147 148 <ul id="imgsUl"></ul> 149 <a class="prev" id="prev" href="javascript:;" ><</a> 150 <a class="next" id="next" href="javascript:;">></a> 151 </div> 152 153 </div> 154 </body> 155 </html> 156 <script> 157 // 记录当前图片下标-- 为了图片索引值同步 158 var imgIndex = 0; 159 var t = null; // 计时器变量 160 var imgWidth =790; 161 var target = 0 ; // 缓动动画移动目标和缓动动画开始位置 162 var autoTimer; 163 // 公共获取事件源函数 164 function $(id) { 165 return document.getElementById(id); 166 } 167 168 // 功能需求类似tab栏，也可参考线上轮播图效果 169 // 获取轮播图区 170 // 获取轮播图 171 var imgArr = [ 172 "images/01.jpg", 173 "images/02.jpg", 174 "images/03.jpg", 175 "images/04.jpg", 176 "images/05.jpg" 177 ]; 178 179 //自动生成小红点li 180 // 默认设置第一个li的className是on 181 // 生成第一个默认li带并设置className = "on" 182 var liArr = []; 183 for(var i = 0 ; i < imgArr.length ; i++ ) { 184 liArr.push(\'<li></li>\') 185 } 186 // 转换成字符串 187 $(\'control\').innerHTML = liArr.join(\'\'); 188 // 设置属性 189 $(\'control\').children[0].setAttribute("class","on") 190 191 192 // 自动生成图片li 193 var imgUl = $("imgsUl"); 194 195 var imgsLis = []; 196 for(var i = 0 ; i < imgArr.length ; i++ ) { 197 imgsLis.push(\'<li><a href="#"><img id="bigImg" src="\'+imgArr[i]+\'"/></a></li>\') 198 } 199 // 转换成字符串 200 imgUl.innerHTML = imgsLis.join(\'\'); 201 // 克隆第一张图片li 202 imgUl.appendChild(imgUl.children[0].cloneNode(true)); 203 204 205 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮 206 $(\'bd\').onmouseover = function () { 207 $(\'prev\').style.display = "block"; 208 $(\'next\').style.display = "block"; 209 } 210 $(\'bd\').onmouseout = function () { 211 $(\'prev\').style.display = "none"; 212 $(\'next\').style.display = "none"; 213 } 214 215 216 217 // 圆点鼠标移到上面图片轮播 218 var liBtns = $(\'control\').getElementsByTagName(\'li\'); 219 for (var i = imgIndex ; i < liBtns.length ; i++) { 220 // 设置当前按钮下标 221 liBtns[i].index = i; 222 liBtns[i].onmouseover = function () { 223 imgIndex = this.index; 224 // 开启的缓动动画的计时器 225 startInterval(imgIndex); 226 } 227 } 228 229 /*上下轮播图*/ 230 // 下一张轮播图 231 $(\'next\').onclick = function () { 232 clearInterval(t); 233 imgIndex++; 234 if(imgIndex == imgUl.children.length ) { 235 imgUl.style.left = 0; 236 imgIndex = 1; 237 } 238 startInterval(imgIndex); 239 }; 240 // 上一张轮播图 241 $(\'prev\').onclick = function () { 242 clearInterval(t); 243 imgIndex--; 244 if(imgIndex == -1 ) { 245 imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px"; 246 imgIndex = imgUl.children.length - 2; 247 } 248 startInterval(imgIndex); 249 } 250 251 // 开启缓动动画计时器 252 function startInterval(index) { 253 // 关闭缓动动画计时器 254 clearInterval(t); 255 for(var j = 0 ; j < liBtns.length ; j++) { 256 liBtns[j].className = ""; 257 } 258 liBtns[index%5].className = \'on\'; 259 console.log(target+\'ttt\'); 260 t = setInterval(function () { 261 // 无缝轮播图片 262 target = -index * imgWidth; 263 var speed = (target-imgUl.offsetLeft)/7; 264 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 265 if(target == imgUl.offsetLeft) { 266 clearInterval(t); 267 }else{ 268 imgUl.style.left = imgUl.offsetLeft + speed + "px"; 269 } 270 },30); 271 272 } 273 274 275 276 277 278 279 280 281 </script>
以上是关于JavaScript--缓动运动+轮播图的主要内容，如果未能解决你的问题，请参考以下文章