向上滚动跑马灯效果

这个代码利用了后面添加一个元素，然后对元素使用和第一个长得一毛一样，所以就是说在我们的第一个和后来长得一模一样的两个元素的时候，我们就需要把我们的transuition属性去掉，同时最后一个的下标就是我们知道的和第一个长得一摸一样的元素，这时候自然过渡让我们把time设置为1，就是第二个显示因为最后一个代替第一个显示，所以我们需要把全局变量变成1，同时会发现替代的元素必须在transitionend 以后执行才是最标准的过渡时间。结束以后要移除否则会进行多次。

function UpDown(selector, child){
  var MovingParent = document.querySelector(selector);
  var MovingChild = document.querySelectorAll(child);
  MovingParent.appendChild(MovingChild[0].cloneNode(true));
  var MovingChildLength = MovingChild.length + 1, time = 0;
  setInterval(function () {
    rollToUp(time++);
  }, 1000);
  function rollToUp(count) {
    if(count === 0){
      MovingParent.style.cssText = "transform: translateY(0); transition: none";
    }else {
      MovingParent.style.cssText = "transform: translateY(" + (-count*50) + "px)";
    }
    if(count === MovingChildLength - 1) {
      MovingParent.addEventListener('transitionend', function () {
        rollToUp(0);
        time = 1;
        MovingParent.removeEventListener('transitionend', arguments.callee)
      });
    }
  }
}