javascript - 如何创建自动滚动列表

我正在尝试使用CSS动画构建自动滚动列表。

我现在得到的是:

.players {
  -webkit-transition: opacity 0.5s ease-out;
  -webkit-animation: autoScrolling 5s linear infinite;
  height: 20em;
}
.players .list-group-item {
  height: 5em;
}
@-webkit-keyframes autoScrolling {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -20em;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6">
    <ul class="list-group players">
      <li class="list-group-item">Player 1</li>
      <li class="list-group-item">Player 2</li>
      <li class="list-group-item">Player 3</li>
      <li class="list-group-item">Player 4</li>
    </ul>
  </div>
</div>

问题是，有可能使播放器1在游戏4的顶部消失时显示在播放4下吗？就像一个端到端的圆圈。

JavaScript解决方案是一个选择。

最佳答案

试试这个Demo.

window.players = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('.players > li').height();
    if(top < temp) {
        top = $('.players').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.players($(this))
    });
}
$(document).ready(function() {
    var i = 0;
    $(".players > li").each(function () {
          $(this).css("top", i);
          i += 60;
          window.players($(this));
    });
});

关于javascript - 如何创建自动滚动列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30664261/