思路

首先将li第一项深克隆复制一份到最后一项
接着给每一个li定高，每隔一段时间，根据下标移动scrollTop
- 移动scrollTop缓慢过度的效果
- 定义开始的距离，以及结束的距离，两者之间移动多少
- 定义一个总变化时长，单次变化的速度，计算在总时长里一共要变化多少次，每次变化的距离，
- 到达目标距离的时候清空计时器
- 当到达列表的最后一项时，让目标距离变为0，当前下标变为0

 <div class="container">
    <h1 class="title">最新公告</h1>
    <ul class="list">
      <li>1.Lorem ipsum dolor sit.</li>
      <li>2.Asperiores provident quidem placeat.</li>
      <li>3.Provident aut mollitia tempore.</li>
      <li>4.Aspernatur saepe quibusdam fugit?</li>
    </ul>
  </div>

// 初始化 立即执行函数好处避免全局污染
(function () {
  var list = document.querySelector(".list")
  // 1.将列表的第一个元素克隆到列表的最后一项
  function cloneFirstItem() {
    var firstItem = list.children[0]
    var newItem = firstItem.cloneNode(true)
    list.appendChild(newItem)
  }
  cloneFirstItem()

  // 2.滚动 每隔一段时间，将列表滚动到下一个位置
  var duration = 2000
  setInterval(moveNext, duration)

  var itemHeight = 30
  var currentIndex = 0

  // 将列表滚动到下一个位置
  function moveNext() {
    var from = currentIndex * itemHeight
    currentIndex++
    var to = currentIndex * itemHeight

    // 从上一个滚动到下一个要慢慢过渡
    var totalDuration = 300  // 过度的总时间
    var duration = 10        // 变化的间隔时间
    var times = totalDuration / duration  // 变化的次数
    var dis = (to - from) / times  // 每次变化的距离

    var timerId = setInterval(() => {
      from += dis
      // 到达目标值 停止定时器
      if (from >= to) {
        clearInterval(timerId)
        if (currentIndex === list.children.length - 1) {
          from = 0 
        currentIndex = 0
        }
      }
      list.scrollTop = from
    }, duration);
  }
})()

文字滚动效果

思路