自己用原生JavaScript写的轮播图，分页器圆点按钮可支持click点击，也可支持mouseover鼠标悬浮触发，同时支持移动端触摸滑动哈，有兴趣的友友可以试试哈，菜鸟一枚，高手看了勿喷，希望多多指正哈：
HTML页做了移动端优化了，按照750px设计稿哈，HTML元素的fontsize是clientWidth/7.5，动态REM;
感觉不足之处是动画平滑度不太好。应该再改改偏移量和时间间隔，还一个因素是用的setInterval做滚动图，setinterval不适合做动画、滚动图哦，不平滑。应该用setTimeout递归效果更好。
轮播图函数carouselFunc 接受的参数还没有改成对象，等以后再改。
JavaScript和CSS都写在HTML文档里了，没分开，直接上源码哈：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> 6 <script type="text/javascript"> 7 var viWidth=document.documentElement.clientWidth; 8 if(viWidth<750){ 9 document.documentElement.style.fontSize=viWidth/7.5+"px"; 10 }else{ 11 document.documentElement.style.fontSize="100px"; 12 } 13 </script> 14 <title>轮播图移动端试验</title> 15 <style type="text/css"> 16 html{ 17 height:100%; 18 text-align: center; 19 } 20 body{ 21 width:7.5rem; 22 height:100%; 23 margin:0 auto; 24 text-align: center; 25 } 26 .clearfix:after{ 27 content:""; 28 display: block; 29 clear: both; 30 height:0px; 31 } 32 .clearfix{ 33 zoom:1; 34 } 35 .myTitle{ 36 margin:0px; 37 line-height:0.6rem; 38 height:0.6rem; 39 padding-top:0.2rem; 40 padding-bottom:0.2rem; 41 text-align:center; 42 } 43 .carousel1{ 44 width:7rem; 45 height:3.5rem; 46 margin-left:auto; 47 margin-right:auto; 48 position: relative; 49 overflow:hidden; 50 } 51 .viewportA{ 52 width:7rem; 53 height:3.5rem; 54 position: relative; 55 overflow: hidden; 56 z-index: 1; 57 } 58 .parentA{ 59 width:1000%; 60 position: absolute; 61 } 62 .parentA .item{ 63 float:left; 64 position: relative; 65 width:7rem; 66 height:3.5rem; 67 margin:0px; 68 display:inline; 69 cursor: pointer; 70 } 71 .parentA .item img{ 72 display: block; 73 width:7rem; 74 height:3.5rem; 75 } 76 .carousel1 .prevA{ 77 position:absolute; 78 height:10%; 79 width:auto; 80 left:0; 81 top:45%; 82 z-index:3; 83 opacity:0.4; 84 cursor: pointer; 85 } 86 .carousel1 .nextA{ 87 position:absolute; 88 height:10%; 89 width:auto; 90 right:0; 91 top:45%; 92 z-index:3; 93 opacity:0.4; 94 cursor: pointer; 95 } 96 .carousel1 .prevA:hover { 97 opacity:0.9; 98 } 99 .carousel1 .nextA:hover { 100 opacity:0.9; 101 } 102 .circleListA{ 103 position:absolute; 104 z-index: 3; 105 bottom:0.2rem; 106 width:1.05rem; 107 height:0.15rem; 108 left:50%; 109 margin-left:-0.525rem; 110 padding-top:0.03rem; 111 padding-bottom:0.03rem; 112 zoom:1; 113 background-color:rgba(255,255,255,0.5); 114 border-radius:0.1rem; 115 } 116 .circleListA span{ 117 float:left; 118 height:0.15rem; 119 width:0.15rem; 120 border-radius:70%; 121 margin-right:0.05rem; 122 background-color:white; 123 cursor: pointer; 124 } 125 .circleListA span:hover{ 126 background:#ffd700; 127 } 128 .circleListA .active{ 129 background:#ff4500!important; 130 } 131 </style> 132 </head> 133 <body> 134 <h1 class="myTitle"></h1> 135 <div class="carousel1" id="carousel1"> 136 <div class="viewportA" id="viewportA"> 137 <div id="parentA" class="parentA clearfix" style="left:-7rem"> 138 <div class="item"><img src="image/5.jpg" width="100%"></div> 139 <div class="item"><img src="image/1.jpg" width="100%"></div> 140 <div class="item"><img src="image/2.jpg" width="100%"></div> 141 <div class="item"><img src="image/3.jpg" width="100%"></div> 142 <div class="item"><img src="image/4.jpg" width="100%"></div> 143 <div class="item"><img src="image/5.jpg" width="100%"></div> 144 <div class="item"><img src="image/1.jpg" width="100%"></div> 145 </div> 146 </div> 147 <img src="image/btn-left.png" id="prevA" class="prevA" alt="点击->上一张"> 148 <img src="image/btn-right.png" id="nextA" class="nextA" alt="点击->下一张"> 149 <div id="circleListA" class="circleListA clearfix"> 150 <span data-index="1" class="active" style="margin-left:0.05rem"></span> 151 <span data-index="2" class=""></span> 152 <span data-index="3" class=""></span> 153 <span data-index="4" class=""></span> 154 <span data-index="5" class=""></span> 155 </div> 156 </div> 157 <script type="text/javascript"> 158 //轮播图构造函数 159 160 function carouselFunc(viewport,parent,listPar,btnName,prev,next,bow,globalT,step,c_Or_Mo){ 161 var list=listPar.getElementsByTagName(btnName); 162 var len=list.length,lim=len-1,i=0; 163 var oriTarget=list[0]; 164 var jg=globalT/step; 165 var timer,autoTimer,timerTo,outWaitT; 166 var t=4000; 167 var luoji=true,flag=false; 168 var startX,startY,endX,endY,nowX,nowY; 169 var offX,offY; 170 if(bow>0){ 171 bow=-bow; 172 } 173 function onceScrollFunc(target){ 174 var j=Number(target.getAttribute("data-index")); 175 var k=Number(oriTarget.getAttribute("data-index")); 176 if(target.className!="active"){ 177 oriTarget.className=""; 178 target.className="active"; 179 oriTarget=target; 180 i=j-1; 181 var oriLoc=parent.offsetLeft; 182 var targetLoc=bow*j; 183 clearInterval(timer); 184 clearInterval(autoTimer); 185 if(targetLoc<oriLoc){ 186 var py=(targetLoc-oriLoc)/step; 187 timer=setInterval(function(){ 188 if(oriLoc>targetLoc){ 189 oriLoc+=py; 190 parent.style.left=oriLoc+"px"; 191 } else{ 192 clearInterval(timer); 193 parent.style.left=targetLoc+"px"; 194 195 } 196 },jg); 197 }else if(targetLoc>oriLoc){ 198 var py=(targetLoc-oriLoc)/step; 199 timer=setInterval(function(){ 200 if(oriLoc<targetLoc){ 201 oriLoc+=py; 202 parent.style.left=oriLoc+"px"; 203 } else{ 204 clearInterval(timer); 205 parent.style.left=targetLoc+"px"; 206 207 } 208 },jg); 209 } 210 } 211 } 212 if(c_Or_Mo=="mouseover"){ 213 listPar.onmouseover=function(event){ 214 timerTo=setTimeout(function(){ 215 var e=event||window.event; 216 var target=e.target||e.srcElement; 217 if(target.tagName.toLowerCase()==btnName){ 218 onceScrollFunc(target); 219 } 220 },120); 221 }; 222 listPar.onmouseout=function(event){ 223 var e=event||window.event; 224 var target=e.target||e.srcElement; 225 if(target.tagName.toLowerCase()==btnName){ 226 clearTimeout(timerTo); 227 } 228 }; 229 } else if(c_Or_Mo=="click"){ 230 listPar.onclick=function(event){ 231 var e=event||window.event; 232 var target=e.target||e.srcElement; 233 if(target.tagName.toLowerCase()==btnName){ 234 onceScrollFunc(target); 235 } 236 } 237 } 238 prev.onclick=function(){ 239 if(luoji){ 240 luoji=false; 241 ScrollWidthFunc(0); 242 } 243 } 244 next.onclick=function(){ 245 if(luoji){ 246 luoji=false; 247 ScrollWidthFunc(1); 248 } 249 } 250 function ScrollWidthFunc(dir){ 251 if(dir==1){ 252 list[i].className=""; 253 if(i<lim){ 254 i+=1; 255 }else{ 256 i=0; 257 parent.style.left="0px"; 258 } 259 list[i].className="active"; 260 oriTarget=list[i]; 261 var nowScroll=parent.offsetLeft; 262 var objScroll=nowScroll+bow; 263 var py=bow/step; 264 timer=setInterval(function(){ 265 if(nowScroll>objScroll){ 266 nowScroll+=py; 267 parent.style.left=nowScroll+"px"; 268 } else{ 269 clearInterval(timer); 270 parent.style.left=objScroll+"px"; 271 luoji=true; 272 } 273 },jg); 274 275 } else{ 276 list[i].className=""; 277 if(i>0){ 278 i-=1; 279 }else{ 280 i=lim; 281 parent.style.left=bow*(len+1)+"px"; 282 } 283 list[i].className="active"; 284 oriTarget=list[i]; 285 var nowScroll=parent.offsetLeft; 286 var objScroll=nowScroll-bow; 287 var py=bow/step; 288 timer=setInterval(function(){ 289 if(nowScroll<objScroll){ 290 nowScroll-=py; 291 parent.style.left=nowScroll+"px"; 292 } else{ 293 clearInterval(timer); 294 parent.style.left=objScroll+"px"; 295 luoji=true; 296 } 297 },jg); 298 } 299 300 } 301 parent.addEventListener('touchstart',function(event){ 302 if(!flag){ 303 clearInterval(autoTimer); 304 clearInterval(timer); 305 clearTimeout(outWaitT); 306 flag=true; 307 var e=event||window.event; 308 tStart(e); 309 } 310 },false); 311 parent.addEventListener('mousedown',function(event){ 312 if(!flag){ 313 clearInterval(autoTimer); 314 clearInterval(timer); 315 clearTimeout(outWaitT); 316 flag=true; 317 var e=event||window.event; 318 tStart(e); 319 } 320 },false); 321 parent.addEventListener('touchmove',function(event){ 322 var e=event||window.event; 323 e.preventDefault(); 324 tMove(e); 325 },false); 326 parent.addEventListener('mousemove',function(event){ 327 var e=event||window.event; 328 e.preventDefault(); 329 tMove(e); 330 },false); 331 parent.addEventListener('touchend',function(event){ 332 var e=event||window.event; 333 flag=false; 334 tEnd(e); 335 },false); 336 parent.addEventListener('mouseup',function(event){ 337 var e=event||window.event; 338 flag=false; 339 tEnd(e); 340 },false); 341 function tStart(e){ 342 var touch; 343 if(e.type=='touchstart'){ 344 touch=e.targetTouches[0]; 345 }else{ 346 touch=e; 347 } 348 startX=touch.pageX; 349 startY=touch.pageY; 350 offX=parent.offsetLeft; 351 offY=parent.offsetTop; 352 } 353 function tMove(e){ 354 if(flag){ 355 var touch; 356 if(e.type=='touchmove'){ 357 touch=e.targetTouches[0]; 358 }else{ 359 touch=e; 360 } 361 nowX=touch.pageX-startX; 362 nowY=touch.pageY-startY; 363 parent.style.left=(offX+nowX)+"px"; 364 } 365 } 366 function tEnd(e){ 367 var touch; 368 if(e.type=='touchend'){ 369 touch=e.changedTouches[0]; 370 }else{ 371 touch=e; 372 } 373 endX=touch.pageX; 374 var distance=parent.offsetLeft; 375 var s=Math.abs(endX-startX); 376 var judge=Math.abs(bow*0.25); 377 var lu=Math.abs(bow)-s; 378 var py=Math.abs(bow/step); 379 if(luoji){ 380 if(s>judge){ 381 if(distance<offX){ 382 list[i].className=""; 383 if(i<lim){ 384 i+=1; 385 }else{ 386 i=0; 387 } 388 list[i].className="active"; 389 oriTarget=list[i]; 390 var objDis=bow*(Math.floor(Math.abs(distance)/Math.abs(bow))+1); 391 timer=setInterval(function(){ 392 if(distance>objDis){ 393 distance-=py; 394 parent.style.left=distance+"px"; 395 }else{ 396 clearInterval(timer); 397 parent.style.left=objDis+"px"; 398 399 if(i==0){ 400 parent.style.left=bow+"px"; 401 } 402 if(e.type=='touchend'){ 403 play(4000,1); 404 } 405 } 406 },jg); 407 }else{ 408 list[i].className=""; 409 if(i>0){ 410 i-=1; 411 }else{ 412 i=lim; 413 } 414 list[i].className="active"; 415 oriTarget=list[i]; 416 var objDis=bow*(Math.floor(Math.abs(distance)/Math.abs(bow))); 417 timer=setInterval(function(){ 418 if(distance<objDis){ 419 distance+=py; 420 parent.style.left=distance+"px"; 421 }else{ 422 clearInterval(timer); 423 parent.style.left=objDis+"px"; 424 if(i==lim){ 425 parent.style.left=bow*len+"px"; 426 } 427 if(e.type=='touchend'){ 428 play(4000,0); 429 } 430 } 431 },jg); 432 } 433 }else{ 434 var targetP=bow*(Math.floor(Math.abs(offX)/Math.abs(bow))); 435 if(distance<targetP){ 436 timer=setInterval(function(){ 437 if(distance<targetP){ 438 distance+=py; 439 parent.style.left=distance+"px"; 440 }else{ 441 clearInterval(timer); 442 parent.style.left=targetP+"px"; 443 if(e.type=='touchend'){ 444 play(4000,1); 445 } 446 } 447 },jg); 448 }else{ 449 timer=setInterval(function(){ 450 if(distance>targetP){ 451 distance-=py; 452 parent.style.left=distance+"px"; 453 }else{ 454 clearInterval(timer); 455 parent.style.left=targetP+"px"; 456 if(e.type=='touchend'){ 457 play(4000,1); 458 } 459 } 460 },jg); 461 } 462 } 463 } else{ 464 var targetP2=(i+1)*bow; 465 if(targetP2<distance){ 466 timer=setInterval(function(){ 467 if(distance>targetP2){ 468 distance-=py; 469 parent.style.left=distance+"px"; 470 }else{ 471 clearInterval(timer); 472 parent.style.left=targetP2+"px"; 473 if(e.type=='touchend'){ 474 play(4000,1); 475 } 476 luoji=true; 477 } 478 },jg) 479 }else{ 480 timer=setInterval(function(){ 481 if(targetP2>distance){ 482 distance+=py; 483 parent.style.left=distance+"px"; 484 }else{ 485 clearInterval(timer); 486 parent.style.left=targetP2+"px"; 487 if(e.type=='touchend'){ 488 play(4000,0); 489 } 490 luoji=true; 491 } 492 493 },jg) 494 } 495 } 496 497 } 498 499 viewport.onmouseover=function(){ 500 clearInterval(autoTimer); 501 clearTimeout(outWaitT); 502 } 503 viewport.onmouseout=function(event){ 504 outWaitT=setTimeout(function(){ 505 play(4000,1); 506 },1000); 507 }; 508 509 function play(t,i){ 510 autoTimer=setInterval(function(){ 511 if(luoji){ 512 luoji=false; 513 ScrollWidthFunc(i); 514 } 515 },t); 516 } 517 play(4000,1); 518 519 } 520 function carousel1Func(){ 521 var carousel1=document.getElementById("carousel1"); 522 var viewportA=document.getElementById("viewportA"); 523 var parentA=document.getElementById("parentA"); 524 var listPar=document.getElementById("circleListA"); 525 var btnName="span"; 526 var prevA=document.getElementById("prevA"); 527 var nextA=document.getElementById("nextA"); 528 var globalT=500; 529 var step=20; 530 var bowA=-viewportA.clientWidth; 531 carouselFunc(carousel1,parentA,listPar,btnName,prevA,nextA,bowA,globalT,step,"mouseover"); 532 } 533 if(window.addEventListener){ 534 window.addEventListener("load",function(){ 535 carousel1Func(); 536 },false); 537 }else if(window.attachEvent){ 538 window.attachEvent("onload",function(){ 539 carousel1Func(); 540 }); 541 } 542 </script> 543 </body> 544 </html>