自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

自己用原生JavaScript写的轮播图，分页器圆点按钮可支持click点击，也可支持mouseover鼠标悬浮触发，同时支持移动端触摸滑动，有兴趣的友友可以试试哈，菜鸟一枚，高手看了勿喷，请多多指正哈：
HTML文档做了移动端优化，按照750px的设计稿哈。HTML这个元素的font-size是document.documentElement.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    if(document.documentElement.clientWidth<751){
302        parent.addEventListener('touchstart',function(event){
303           if(!flag){
304            clearInterval(autoTimer);
305            clearInterval(timer);
306            clearTimeout(outWaitT); 
307            flag=true;
308            var e=event||window.event;
309            tStart(e);
310           }
311          },false);
312        parent.addEventListener('touchmove',function(event){
313          var e=event||window.event;
314          e.preventDefault();
315          tMove(e);
316         },false);
317       parent.addEventListener('touchend',function(event){
318         var e=event||window.event;        
319         flag=false;
320         tEnd(e);
321         },false);
322     } else{
323        if(parent.addEventListener){
324          parent.addEventListener('mousedown',function(event){
325           if(!flag){
326            clearInterval(autoTimer);
327            clearInterval(timer);
328            clearTimeout(outWaitT); 
329            flag=true;
330            var e=event||window.event;
331            tStart(e);
332           } 
333          },false);
334         parent.addEventListener('mousemove',function(event){
335          var e=event||window.event;
336          e.preventDefault();
337          tMove(e);
338         },false);
339         parent.addEventListener('mouseup',function(event){
340         var e=event||window.event;        
341         flag=false;
342         tEnd(e);
343         },false);
344       }else{
345         parent.attachEvent('onmousedown',function(event){
346           if(!flag){
347            clearInterval(autoTimer);
348            clearInterval(timer);
349            clearTimeout(outWaitT); 
350            flag=true;
351            var e=event||window.event;
352            tStart(e);
353           } 
354          });
355         parent.attachEvent('onmousemove',function(event){
356          var e=event||window.event;
357          e.preventDefault();
358          tMove(e);
359         });
360         parent.attachEvent('onmouseup',function(event){
361         var e=event||window.event;        
362         flag=false;
363         tEnd(e);
364         });
365       }
366   } 
367   
368   function tStart(e){
369         var touch;
370           if(e.type=='touchstart'){
371           touch=e.targetTouches[0];
372          }else{
373           touch=e;
374          }
375           startX=touch.pageX;
376           startY=touch.pageY;
377           offX=parent.offsetLeft;
378           offY=parent.offsetTop;
379      }
380   function tMove(e){
381           if(flag){
382          var touch;
383          if(e.type=='touchmove'){
384          touch=e.targetTouches[0];
385          }else{
386           touch=e;
387          }
388          nowX=touch.pageX-startX;
389          nowY=touch.pageY-startY;
390          parent.style.left=(offX+nowX)+"px";
391         }
392      }
393   function tEnd(e){
394         var touch;
395         if(e.type=='touchend'){
396         touch=e.changedTouches[0];
397         }else{
398           touch=e;
399         }
400         endX=touch.pageX;
401         var distance=parent.offsetLeft;
402         var s=Math.abs(endX-startX);
403         var judge=Math.abs(bow*0.2);
404         var lu=Math.abs(bow)-s;
405         var py=Math.abs(bow/step);
406        if(luoji){
407        if(s>judge){
408            if(distance<offX){
409             list[i].className="";
410             if(i<lim){
411               i+=1;
412               var objDis=bow*(Math.floor(Math.abs(distance)/Math.abs(bow))+1);
413              }else{
414               parent.style.left=-s+"px";
415               distance=-s;
416              var objDis=bow;
417               i=0;
418              }
419              list[i].className="active";
420            oriTarget=list[i];
421            timer=setInterval(function(){
422              if(distance>objDis){
423               distance-=py;
424               parent.style.left=distance+"px";
425              }else{
426               clearInterval(timer);
427               parent.style.left=objDis+"px";
428               if(e.type=='touchend'){
429               play(4000,1);
430             }
431            }
432           },jg);
433         }else{
434            list[i].className="";
435                if(i>0){
436               i-=1;
437               var objDis=bow*(Math.floor(Math.abs(distance)/Math.abs(bow)));
438              }else{
439              parent.style.left=(bow*(len+1)+s)+"px";
440              distance=bow*(len+1)+s;
441             var objDis=bow*len;
442              i=lim;
443              }
444           list[i].className="active";
445           oriTarget=list[i];
446          timer=setInterval(function(){
447             if(distance<objDis){
448               distance+=py;
449               parent.style.left=distance+"px";
450             }else{
451               clearInterval(timer);
452               parent.style.left=objDis+"px";
453               if(e.type=='touchend'){
454                play(4000,0);
455             }
456            }
457           },jg);
458         }
459       }else{
460          var targetP=bow*(Math.floor(Math.abs(offX)/Math.abs(bow)));
461          if(distance<targetP){
462             timer=setInterval(function(){
463             if(distance<targetP){
464               distance+=py;
465               parent.style.left=distance+"px";
466             }else{
467               clearInterval(timer);
468               parent.style.left=targetP+"px";
469               if(e.type=='touchend'){
470                play(4000,1);
471             }
472            }
473           },jg);
474         }else{
475           timer=setInterval(function(){
476              if(distance>targetP){
477               distance-=py;
478               parent.style.left=distance+"px";
479              }else{
480               clearInterval(timer);
481               parent.style.left=targetP+"px";
482               if(e.type=='touchend'){
483                play(4000,1);
484             }
485              }
486           },jg);
487         }
488       }
489     } else{
490       var targetP2=(i+1)*bow;
491       if(targetP2<distance){
492         timer=setInterval(function(){
493           if(distance>targetP2){
494             distance-=py;
495             parent.style.left=distance+"px";
496           }else{
497             clearInterval(timer);
498             parent.style.left=targetP2+"px";
499            if(e.type=='touchend'){
500              play(4000,1);
501             }
502             luoji=true;
503           }
504         },jg)
505       }else{
506         timer=setInterval(function(){
507            if(targetP2>distance){
508             distance+=py;
509             parent.style.left=distance+"px";
510            }else{
511             clearInterval(timer);
512             parent.style.left=targetP2+"px";
513             if(e.type=='touchend'){
514              play(4000,0);
515             }
516             luoji=true;
517            }
518         },jg)
519       }
520     }
521   }
522     
523    viewport.onmouseover=function(){
524       clearInterval(autoTimer);
525       clearTimeout(outWaitT);
526       }
527    viewport.onmouseout=function(event){
528        outWaitT=setTimeout(function(){
529               play(4000,1);
530             },1000);
531   };
532 
533   function play(t,i){
534     autoTimer=setInterval(function(){
535        if(luoji){
536              luoji=false;
537             ScrollWidthFunc(i);  
538         } 
539     },t);
540   }
541   play(4000,1);
542    
543 }
544 function carousel1Func(){
545    var carousel1=document.getElementById("carousel1");
546    var viewportA=document.getElementById("viewportA");
547    var parentA=document.getElementById("parentA");
548    var listPar=document.getElementById("circleListA");
549    var btnName="span";
550    var prevA=document.getElementById("prevA");
551    var nextA=document.getElementById("nextA");
552    var globalT=500;
553    var step=50;
554    var bowA=-viewportA.clientWidth;
555    carouselFunc(carousel1,parentA,listPar,btnName,prevA,nextA,bowA,globalT,step,"mouseover");
556 }
557 if(window.addEventListener){
558   window.addEventListener("load",function(){
559         carousel1Func();
560   },false);
561 }else if(window.attachEvent){
562   window.attachEvent("onload",function(){
563        carousel1Func();
564   });
565 }
566 </script>
567 </body>
568 </html>
posted @ 2018-06-05 17:50 walker-lei 阅读(949) 评论(0) 收藏举报
刷新页面返回顶部
walker-lei

自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

公告
