原生JS实现图片无缝滚动方法(附带封装的运动框(2)

window.onload = function(){
  var oTab = document.getElementById('tab');
  var oUl = oTab.getElementsByTagName('ul')[0];
  var aLi1 = oUl.children;
  var oOl = oTab.getElementsByTagName('ol')[0];
  var aLi2 = oOl.children;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  //设置ul的初始位置
  var iNow = 1;  
  oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
  //定时器
  var timer = null;

  //克隆第一张图片 添加在ul的最后面
  var oLi1 = aLi1[0].cloneNode(true);
  //克隆最后一张图片 添加在ul的最前面
  var oLi2 = aLi1[aLi1.length-1].cloneNode(true);
  oUl.appendChild(oLi1);
  oUl.insertBefore(oLi2,aLi1[0]);
  oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px";
  //鼠标移入tab: 关闭定时器，左右按钮显示
  oTab.onmouseover = function(){
    clearInterval(timer);
    prev.style.display = 'block';
    next.style.display = 'block';
  }
  //鼠标移出tab: 开启定时器，左右按钮隐藏
  oTab.onmouseout = function(){
    timer = setInterval(function(){
      toNext();
    },2000);
    prev.style.display = 'none';
    next.style.display = 'none';
  }
  //点击小圆点
  for(var i=0;i<aLi2.length;i++){
    (function(index){
      aLi2[index].onclick = function(){
        iNow = index+1;
        for(var i=0;i<aLi2.length;i++){
          aLi2[i].className = '';
        }
        aLi2[index].className = 'on';
        animate(oUl,{left: -iNow*aLi1[0].offsetWidth});
      }
    })(i);
  }
  //上一个
  prev.onclick=function(){
    iNow--;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == 0){
        iNow = aLi1.length-2;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //下一个
  next.onclick=function(){
    toNext();
  }
  function toNext(){
    iNow++;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == aLi1.length-1){
        iNow = 1;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //设置定时器
  timer = setInterval(function(){
    toNext();
  },2000);
}

/*
 * 参数说明:
 * obj: 运动对象
 * json(json形式): 需要修改的属性
 * options(json形式): 
 *       duration: 运动时间
 *       easing: 运动方式（匀速、加速、减速）
 *       complete: 运动完成后执行的函数
*/
function animate(obj,json,options){
  var options=options || {};        
  var duration=options.duration || 500;  //运动时间,默认值为500ms;
  var easing=options.easing || 'linear';  //运动方式,默认为linear匀速
  var start={};
  var dis={};

  for(var name in json){
    start[name]=parseFloat(getStyle(obj,name));  //起始位置
    dis[name]=json[name]-start[name];      //总距离
  }

  var count=Math.floor(duration/30);         //总次数
  var n=0;  //次数

  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
     if(n>count){
      clearInterval(obj.timer);
      options.complete && options.complete();
    }else{
      for(var name in json){
        switch(easing){
          //匀速
          case 'linear':
            var a=n/count;
            var cur=start[name]+dis[name]*a;  //当前位置
            break;
          //加速
          case 'ease-in':
            var a=n/count;
            var cur=start[name]+dis[name]*a*a*a;
            break;
          //减速
          case 'ease-out':
            var a=1-n/count;
            var cur=start[name]+dis[name]*(1-a*a*a);
            break;
        }
         if(name=='opacity'){
          obj.style.opacity=cur;
          obj.style.filter = 'alpha(opacity='+cur*100+')';  //兼容IE8及以下
        }else{
          obj.style[name]=cur+'px';
        }
      }
    }
    n++;
  },30);
}
//获取非行间样式
function getStyle(obj,sName){
  return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}