JS实现走马灯效果：代码示例与解析

这是一个简单的用JS实现走马灯效果的例子：

HTML代码：

<div id='marquee'>
  <ul>
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <li>第四条消息</li>
    <li>第五条消息</li>
  </ul>
</div>

CSS代码：

#marquee {
  width: 400px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #ccc;
}

#marquee ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#marquee li {
  height: 20px;
  line-height: 20px;
}

JS代码：

var marquee = document.getElementById('marquee');
var ul = marquee.getElementsByTagName('ul')[0];
var liHeight = ul.getElementsByTagName('li')[0].offsetHeight;
var speed = 50; // 滚动速度，单位：像素/秒
var delay = 3000; // 每条消息停留的时间，单位：毫秒
var timer = null;
var current = 0;

function scrollMarquee() {
  current += 1;
  if (current > ul.getElementsByTagName('li').length - 1) {
    current = 0;
  }
  marquee.scrollTop = current * liHeight;
}

function startMarquee() {
  timer = setInterval(scrollMarquee, speed);
}

function stopMarquee() {
  clearInterval(timer);
}

marquee.onmouseover = stopMarquee;
marquee.onmouseout = startMarquee;

startMarquee();
setTimeout(startMarquee, delay); // 第一条消息停留的时间

解释：

首先获取到marquee元素及其子元素ul和li的高度，以便在滚动时准确计算滚动的距离。
定义滚动速度和每条消息停留的时间。滚动速度表示每秒钟滚动的像素数，停留时间表示每条消息在视图中停留的时间。
定义timer变量用于存储计时器的ID，以便在需要的时候停止计时器。
定义current变量表示当前滚动到了哪一条消息。
定义scrollMarquee()函数用于实现滚动的逻辑。首先将current加1并判断是否超出了消息列表的长度，如果超出了就将current重置为0。然后根据current计算出需要滚动的距离，并将marquee元素的scrollTop属性设置为该值，从而实现滚动效果。
定义startMarquee()函数用于启动滚动。该函数使用setInterval()函数启动一个计时器，每隔一定时间调用一次scrollMarquee()函数，从而实现连续的滚动效果。
定义stopMarquee()函数用于停止滚动。该函数使用clearInterval()函数清除计时器。
将startMarquee()函数绑定到marquee元素的onmouseover事件上，将stopMarquee()函数绑定到marquee元素的onmouseout事件上，从而实现鼠标悬停时停止滚动，鼠标移开时继续滚动的效果。
最后调用startMarquee()函数启动滚动，并通过setTimeout()函数将第一条消息的停留时间延迟一定时间后再启动滚动。这样可以让用户有足够的时间看到第一条消息，避免过快的滚动导致用户无法阅读消息。