分享一个自己写的简单的自动轮播的的函数

我来讲解一下这个函数意思

首先传入的参数 ：obj ：即要改变translateX/Y的对象，dir ：运动方向x或y

如   

        <ul>

           <li></li>

          <li></li>

        </ul>

要通过改变ul的位置来实现轮播

  var oUl=document.getElementsByTagName('ul')[0];

autoChange(oUl,'x')

 function autoChange (obj, dir) {
    var el = obj.children;                 //取到子级 ，li
    var length = el.length;             //获得li的长度

    var num = 0;
    var num2 = 0;
   var off=true;
    var translate = {
        x: 'translateX',                       //根据方向，改变对应的translate
        y: 'translateY',
    }
    clearInterval(obj.timer)              //因为很可能在多个地方调用，所以每次都要清除上一次

    var moveDis = 0;

    moveDis = (dir === 'x') ? el[0].offsetWidth : el[0].offsetHeight;            //根据方向，获得单个li的宽或高

    obj.timer = setInterval(function () {
        if (num === length - 1) {                                                               //当运动到最后一张时                            

               e[0].style.position='relative';                                                 //将第一张定位到最后，（此处若li的css属性有position：absolute时就忽略；）

                e[0].style.translate[dir]=  length * moveDis                                             
                num = 0;                                                                               //此时将num置为0；

                 off=true;

         } else {
            num++;
        }
        num2++;                                                                                    //若当移动到第length-1张后此时num2还加1，移动到第length张
        obj.style.transition = '0.6s';                                                       //   

         obj,style.translate[dir]=-num2*moveDis +'px';                           //移动ul
        obj.addEventListener('webkitTransitionEnd', function () {
            if (num === 0) {                                                                   //此时已经移动到第length张了，

                     if(off){

                            off=false;                                                          //因为后面的程序要改变obj的translate值，还会触发obj的webkitTransitionEnd事件，所以加个控制

                          obj.style.transition = '0s';                                             

                          obj.style.translate[dir]= 0;                                                //将obj 迅速拉回0       将transition置为0的意思时，ob才能迅速变为0；以至于肉眼看不出来

                         e[0].style.position='static';                                                

                         e[0].style.translate[dir]= 0;                                              //恢复第一张的定位
                         num2 = 0

                  }

              
            }
        })
    }, 5000)
}