1.js基础实现文字滚动效果

1.实现效果

2，js代码

// 初始化：一开始怎么做
// 获取元素
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 curIndex = 0
// 将列表滚动到下一个位置
function moveNext() {
  // 开始滚动高度
  var from = curIndex * itemHeight
  curIndex++
  var to = curIndex * itemHeight //下一项滚动高度
  // list.scrollTop = to
  //让list的scrollTop，从from慢慢变为to
  // console.log('从' + from + '到' + to)
  var totalDuration = 300 //变化总时间
  var duration = 10 //变化的间隔时间
  var times = totalDuration / duration //变化的次数
  var dis = (to - from) / times //每次变化的量
  // 开始计时器，不断变化list.scrollTop的值
  var timerId = setInterval(function () {
    from += dis
    if (from >= to) {
      // 到达目标值
      clearInterval(timerId) //停止计时器
      // 滚动到最后一项
      if (curIndex === list.children.length - 1) {
        from = 0
        curIndex = 0
      }
    }
    list.scrollTop = from
  }, duration)
}