js+css新闻公告向上滚动

公告向上间歇性向上滚动
使用setInterval进行间隔调用，activityIndex * 单个li的高度；
复制第一条添加到最后，删除transtion特效。

html

<div class="big">
    <div class="small">
      <ul id="listUL" class="tran">
        <li>111111111111</li>
        <li>222222222</li>
        <li>333333333</li>
        <li>444444444444</li>
        <li>555555555555</li>
        <li>111111111111</li>
      </ul>
    </div>
  </div>

css

* {
    margin: 0;
    padding: 0;
  }

  .big {
    height: 500px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ccc;
  }

  .small {
    height: 25px;
    background-color: red;
    line-height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }

  .tran {
    margin-top: 0;
    transition: margin-top 2s
  }

  .small li {
    height: 25px;
    line-height: 25px;
  }

  .small li:nth-child(1) {
    background-color: blue;
  }

  .small li:nth-child(2) {
    background-color: yellow;
  }

  .small li:nth-child(3) {
    background-color: green;
  }

  .small li:nth-child(4) {
    background-color: yellowgreen;
  }

  .small li:nth-child(5) {
    background-color: greenyellow;
  }

js

let activityIndex = 0;
  listUL = document.getElementById('listUL')
  firstLi = listUL.children[0]
  listLength = listUL.children.length;
  function roll(params) {
    listUL.classList.add("tran")
    if (activityIndex < listLength-1) {
      activityIndex++
    } else {
      listUL.classList.remove("tran")
      activityIndex = 0
    }
    listUL.style.marginTop = -activityIndex * 25 + 'px'
    console.log(activityIndex)
  }
  setInterval(roll, 2000);