Javascript 横向不间断滚动效果

broadcast.html

<div class="broadcast-box" id="broadcast_box">
    <ul class="broadcast-detail" id="broadcast_detail">
        <li>年会还剩两天就要来了，你准备好中大奖了么？</li>
        <li>最后两天！再不报销本季度的钱再也拿不回来了你家里人造么？</li>
        <li>星际2电竞娱乐化RPG地图入选“线上冠军赛</li>
    </ul>
</div>
<script type="text/javascript">
  var broadcast_div = document.getElementById('broadcast_div');
  if (broadcast_div) {
      var broadcast_ul = document.getElementById('broadcast_ul'),
          broadcast_li = broadcast_ul.getElementsByTagName('li'),
          //broadcast_width = broadcast_li[0].offsetWidth,
          marquee = function () {
              broadcast_div.scrollLeft += 2;
              if (broadcast_div.scrollLeft % broadcast_ul.getElementsByTagName('li')[0].offsetWidth <= 1) {
                  broadcast_ul.appendChild(broadcast_ul.getElementsByTagName('li')[0]);
                  broadcast_div.scrollLeft = 0;
              }
          },
          broadcast_speed = 100,
          broadcast_timer = null,
          clientWidth = 0;
  
      for (var i = 0, j = broadcast_li.length; i < j; i++) {
          clientWidth += broadcast_li[i].clientWidth;
      }
  
      if (clientWidth > broadcast_div.clientWidth) {
          broadcast_ul.innerHTML += broadcast_ul.innerHTML;
          broadcast_timer = setInterval(marquee, broadcast_speed);
          broadcast_div.onmouseover = function () {
              clearInterval(broadcast_timer);
          };
          broadcast_div.onmouseout = function () {
              broadcast_timer = setInterval(marquee, broadcast_speed);
          };
      }
  }
</script>