jquery实现文字左右滚动

<div id="marquee-container">
  <p id="marquee-text">这里是需要滚动的文字内容...</p>
</div>
 
<button id="start-scroll">开始滚动</button>
<button id="stop-scroll">停止滚动</button>

#marquee-container {
  white-space: nowrap;
  overflow: hidden;
  width: 250px; /* 根据需要设置容器宽度 */
}
 
#marquee-text {
  position: absolute;
}

$(document).ready(function() {
  var $marqueeText = $('#marquee-text');
  var scrollWidth = $marqueeText[0].scrollWidth;
  var containerWidth = $('#marquee-container').width();
 
  function scroll() {
    $marqueeText.animate({
      left: -scrollWidth + containerWidth
    }, 10000, 'linear', function() {
      $marqueeText.css('left', containerWidth);
      scroll();
    });
  }
 
  $('#start-scroll').on('click', function() {
    scroll();
  });
 
  $('#stop-scroll').on('click', function() {
    $marqueeText.stop();
  });
});