自己写的轮播图，原生JavaScript，支持移动端触摸滑动。分页器圆点可以支持mouseover鼠标移入和click点击，面向对象思路

自己用原生javascript写的轮播图，分页器按钮Click点击与mouseover鼠标悬浮导航都支持，同时支持移动端触摸滑动操作。感觉自己写的不足之处是图片滚动动画还不够平滑，再改改间隔与偏移量应该可以，还有一个因素是图片滚动用setInterval做的，setInterval不太适合做动画，不平滑。感觉这次写的轮播图功能比较全面了哈。高手们请别笑话，不足请指正。

HTML文档做了移动端优化，按照7.5rem的视口宽。HTML这个元素的font-size是document.documentElement.clientWidth / 7.5，所以rem是动态的。上源码：

先JavaScript：

function carouselFunc(obj){
var list=obj.listPar.getElementsByTagName(obj.btnName);
var len=list.length,lim=len-1,i=0;
var oriTarget=list[0];
var jg=obj.globalT/obj.step;
var timer,autoTimer,timerTo,outWaitT;
var t=4000;
var luoji=true,flag=false;
var startX,startY,endX,endY,nowX,nowY;
var offX,offY;
        if(obj.bow>0){
          obj.bow=-obj.bow;
        }
        function onceScrollFunc(target){
           var j=Number(target.getAttribute("data-index"));
           var k=Number(oriTarget.getAttribute("data-index"));
           if(target.className!="active"){
            oriTarget.className="";
            target.className="active";
            oriTarget=target;
            i=j-1;
            var oriLoc=obj.parent.offsetLeft;
            var targetLoc=obj.bow*j;
            clearInterval(timer);
            clearInterval(autoTimer);
            if(targetLoctargetLoc){
                      oriLoc+=py;
                      obj.parent.style.left=oriLoc+"px";
                    } else{
                      clearInterval(timer);
                      obj.parent.style.left=targetLoc+"px";

                    }
               },jg);
             }else if(targetLoc>oriLoc){
              var py=(targetLoc-oriLoc)/obj.step;
              timer=setInterval(function(){
                if(oriLocobjScroll){
                  nowScroll+=py;
                  obj.parent.style.left=nowScroll+"px";
               } else{
                  clearInterval(timer);
                  obj.parent.style.left=objScroll+"px";
                  luoji=true;
             }
           },jg);  

         } else{
          list[i].className="";
          if(i>0){
            i-=1;
          }else{
            i=lim;
            obj.parent.style.left=obj.bow*(len+1)+"px";
          }
            list[i].className="active";
            oriTarget=list[i];
            var nowScroll=obj.parent.offsetLeft;
           var objScroll=nowScroll-obj.bow;
           var py=obj.bow/obj.step;
           timer=setInterval(function(){
             if(nowScrolljudge){
           if(distanceobjDis){
              distance-=py;
              obj.parent.style.left=distance+"px";
             }else{
              clearInterval(timer);
              obj.parent.style.left=objDis+"px";
              luoji=true;
              if(e.type=='touchend'){
              clearInterval(autoTimer);
              play(4000,1);
            }
           }
          },jg);
        }else{
           list[i].className="";
               if(i>0){
              i-=1;
              var objDis=obj.bow*(Math.floor(Math.abs(distance)/Math.abs(obj.bow)));
             }else{
             obj.parent.style.left=(obj.bow*(len+1)+s)+"px";
             distance=obj.bow*(len+1)+s;
            var objDis=obj.bow*len;
             i=lim;
             }
          list[i].className="active";
          oriTarget=list[i];
           flag=false;
         timer=setInterval(function(){
            if(distancetargetP){
              distance-=py;
              obj.parent.style.left=distance+"px";
             }else{
              clearInterval(timer);
              obj.parent.style.left=targetP+"px";
              luoji=true;
              if(e.type=='touchend'){
               clearInterval(autoTimer);
               play(4000,1);
            }
             }
          },jg);
        }
      }
    } else{
      var targetP2=(i+1)*obj.bow;
       flag=false;
      if(targetP2targetP2){
            distance-=py;
            obj.parent.style.left=distance+"px";
          }else{
            clearInterval(timer);
            obj.parent.style.left=targetP2+"px";
            luoji=true;
            if(e.type=='touchend'){
             clearInterval(autoTimer);
             play(4000,1);
            }
          }
        },jg)
      }else{
        timer=setInterval(function(){
           if(targetP2>distance){
            distance+=py;
            obj.parent.style.left=distance+"px";
           }else{
            clearInterval(timer);
            obj.parent.style.left=targetP2+"px";
            luoji=true;
            if(e.type=='touchend'){
             clearInterval(autoTimer);
             play(4000,0);
            }
           }
        },jg)
      }
    }
  }
    
   obj.viewport.οnmοuseοver=function(){
      clearInterval(autoTimer);
      clearTimeout(outWaitT);
      }
   obj.viewport.οnmοuseοut=function(event){
       outWaitT=setTimeout(function(){
              play(4000,1);
            },1000);
  };

  function play(t,i){
    autoTimer=setInterval(function(){
       if(luoji){
             luoji=false;
            ScrollWidthFunc(i);  
        } 
    },t);
  }
 play(4000,1);
}

然后上HTML：