js实现文字超出范围滚动(关键词-多点)

js实现文字超出范围滚动，为什么我这个滚动了一会就不动了，内容多点又不会了

img

img

img

该回答引用GPTᴼᴾᴱᴺᴬᴵ
你的代码有几个问题：

  1. 在第一段代码中，你没有正确关闭一个标签，即缺少了一个 ">"
  2. 在第二段代码中，你设置了容器的宽度为 535px，但是实际上你应该使用百分比来适应不同尺寸的屏幕。如果你的容器宽度固定为 535px，那么当屏幕宽度小于 535px 时，你的滚动效果将无法正常工作。
  3. 在第三段代码中，你的函数名是 ScrollImgLeft，但是你在代码中使用了 Marquee，这可能会导致函数调用出错。此外，在 if 语句中，你应该检查 scroll_end.offsetWidth 而不是 scroll end.offsetwidth。

以下是已经修改过的代码：

<div id="scroll_div" class="fl">
  <div id="scroll_begin">
    <span class="pad right">刘一</span>
    <span class="pad right">陈-</span>
    <span class="pad right">张三</span>
    <span class="pad right">李四</span>
    <span class="pad right">王五</span>
    <span class="pad right">赵六</span>
    <span class="pad right">孙七</span>
    <span class="pad right">周八</span>
    <span class="pad right">吴九</span>
    <span class="pad right">郑十</span>
  </div>
  <div id="scroll_end"></div>
</div>



#scroll_div {
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

#scroll_begin, #scroll_end {
  display: inline;
}

.pad.right {
  padding-right: 2em;
}



function scrollText() {
  var speed = 20;
  var MyMar = null;
  var scroll_begin = document.getElementById("scroll_begin");
  var scroll_end = document.getElementById("scroll_end");
  var scroll_div = document.getElementById("scroll_div");

  scroll_end.innerHTML = scroll_begin.innerHTML;

  function Marquee() {
    if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
      scroll_div.scrollLeft -= scroll_begin.offsetWidth;
    } else {
      scroll_div.scrollLeft++;
    }
  }

  MyMar = setInterval(Marquee, speed);

  scroll_div.onmousedown = function () {
    clearInterval(MyMar);
  };

  scroll_div.onmouseover = function () {
    clearInterval(MyMar);
  };

  scroll_div.onmouseout = function () {
    MyMar = setInterval(Marquee, speed);
  };
}

scrollText();

这个代码会根据容器的宽度自适应，所以你不需要设置容器的宽度。注意在 HTML 中使用正确的 ID 名称来调用 scrollText() 函数。