如何使用JS根据placard下placard_item数量判断是否执行跑马灯效果

你只需要在原有跑马灯逻辑的入口处增加公告数量判断即可实现需求，两种实现方式可选：

方式1：修改原有slideLine函数（推荐，无需调整调用逻辑） #

在函数最开头加入数量判断，公告数≤1时直接终止执行，修改后完整代码如下：

function slideLine(box, stf, delay, speed, h) {
  console.log('slideLine')
  var slideBox = document.getElementById(box);
  // 新增：判断公告数量
  const itemCount = slideBox.querySelectorAll('.placard_item').length;
  if (itemCount <= 1) return; // 只有1条时直接退出，不执行跑马灯

  var delay = delay || 500,
    speed = speed || 20,
    h = h || 20;
  var tid = null,
    pause = false;
  var s = function() {
    tid = setInterval(slide, speed);
  }
  var slide = function() {
    if (pause) return;
    slideBox.scrollTop += 1;
    if (slideBox.scrollTop % h == 0) {
      clearInterval(tid);
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
      slideBox.scrollTop = 0;
      setTimeout(s, delay);
    }
  }
  slideBox.onmouseover = function() {
    pause = true;
  }
  slideBox.onmouseout = function() {
    pause = false;
  }
  setTimeout(s, delay);
}
slideLine('js-placard', 'div', 1000, 25, 20);

方式2：调用函数前做判断（无侵入，适合不想改原有封装函数的场景） #

原有slideLine函数保持不变，仅修改最后调用的逻辑即可：

// 先统计公告数量
const placardBox = document.getElementById('js-placard');
const itemCount = placardBox.querySelectorAll('.placard_item').length;
// 数量≥2时才调用跑马灯函数
if (itemCount > 1) {
  slideLine('js-placard', 'div', 1000, 25, 20);
}

两种方式都完全保留原有跑马灯的滚动、悬停暂停效果，仅在单条公告时停止滚动。

内容的提问来源于stack exchange，提问作者AWEI