js实现走马灯效果

走马灯效果通常指的是一个元素在页面上循环滚动，类似于电视上的走马灯新闻。以下是一个简单的JavaScript函数，用于实现基本的走马灯效果：

function marqueeEffect(selector, speed) {
  const element = document.querySelector(selector);
  const parent = element.parentNode;
  const clonedElement = element.cloneNode(true);
 
  // 将原始元素和克隆元素添加到父元素中
  parent.appendChild(clonedElement);
 
  // 创建一个定时器来持续移动元素
  let left = 0;
  setInterval(() => {
    left -= speed;
    element.style.transform = `translateX(${left}px)`;
 
    // 当元素移出视野时，将其位置重置
    if (left <= -element.offsetWidth) {
      left = 0;
      element.style.transform = '';
    }
  }, 20); // 20毫秒移动一次
}
 
// 使用函数
marqueeEffect('#marquee', 1); // 参数是元素的选择器和滚动速度

HTML部分：

<div id="marquee">
  <p>这是走马灯效果的文本内容</p>
</div>

这段代码会使得id为marquee的元素中的内容不断循环滚动。你可以根据需要调整speed参数来控制滚动速度。