SOURCE

/*!
* marquee
* 2017.10 fb
* 调用方法：marquee.init(opts)
*/
; (function(win) {
  //对象扩展
  function extend(des, source) {
    for (var key in source) {
      if(source.hasOwnProperty(key)){
        des[key] = source[key];
      }
    }
    return des;
  };
  //node clone
  function cloneNode(el, direction) {
    var cloneNode;
    var firstEle = el.firstElementChild;
    if (direction == 'up') {
      cloneNode = firstEle.cloneNode(true);
      el.appendChild(cloneNode);
    } else {
      cloneNode = el.lastElementChild.cloneNode(true);
      el.insertBefore(cloneNode, firstEle);
    }
  }
  //定义主方法
  var marquee = function(opts) {
    var defaults = {
      el: '.marquee-box',
      direction: 'up',
      itemHeight: 20,
      duration: 1000,
      //切换条目时间
      interval: 2500,
      //切换动画时间
      beforeTransform: function() {},
      afterTransform: function() {}
    };
    opts = extend(defaults, opts || {});

    var el = document.querySelector(opts.el);
    var length = el.children.length;
    var currentIndex = 0;
    var currenTranslateY = 0;

    if (opts.direction != 'up') {
      currentIndex = length - 1;
      currenTranslateY = -length * opts.itemHeight;
      el.style.transform = 'translate3d(0,' + currenTranslateY + 'px,0)';
    }
    cloneNode(el, opts.direction);

    var timer = setInterval(function() {
      if (opts.direction == 'up') {
        currentIndex++;
        currenTranslateY = -currentIndex * opts.itemHeight;
      } else {
        currentIndex--;
        currenTranslateY = -(currentIndex + 1) * opts.itemHeight;
      }

      el.style.transform = 'translate3d(0,' + currenTranslateY + 'px,0)';
      el.style.transition = 'transform ' + opts.duration + 'ms';
			//go to  first
      if (currentIndex == length) {
        setTimeout(function() {
          currentIndex = 0;
          currenTranslateY = 0;
          el.style.transform = 'translate3d(0,' + currenTranslateY + 'px,0)';
          el.style.transition = 'transform 0ms';
        },
        opts.duration);
        goToFirst()
      } else if (currentIndex == -1) {
        setTimeout(function() {
          currentIndex = length - 1;
          currenTranslateY = -(currentIndex + 1) * opts.itemHeight;
          el.style.transform = 'translate3d(0,' + currenTranslateY + 'px,0)';
          el.style.transition = 'transform 0ms';
        },
        opts.duration)
      }
    },
    opts.interval + opts.duration);
  };
  //对外方法
  marquee.init = function(opts) {
    return new marquee(opts)
  }
  win.marquee = marquee;
})(window);

marquee.init({
  el: '.marquee-box',
  itemHeight: 30,
  direction: 'up'
});

<div class="marquee">
  <ul class="marquee-box">
    <li>
      第1名
    </li>
    <li>
      第2名
    </li>
    <li>
      第3名
    </li>
  </ul>
</div>

ul {
  margin: 0;
  padding: 0;
}

.marquee {
  height: 25px;
  overflow: hidden
}

.marquee-box {
  transform: translate3d(0px, 0px, 0px);
  transition: transform 300ms;
}

.marquee-box li {
  height: 30px;
}