1

我正在尝试在我的网站上设置一个水平向左滚动的图像选框。它使用这个人的 JavaScript 代码来复制选取框内的图像，这样选取框就不必停止。

我需要在 4 个胸部标签中的每一个中使用不同的选框。一切似乎都在第一个选项卡中工作，直到我在其他选项卡中添加了其他选取框。现在，除了一个选框外，所有选框都无限滚动。其余的人停止复制他们的图像，字幕从屏幕上消失。这是该错误的屏幕截图，除了您在页面加载时看到的第一个之外的选框停止复制其图像并变为空： 错误的图像

这只发生在我发布的网站上，而不是 Stack Snippet。然而代码似乎是一样的。我需要对此代码进行哪些更改才能使所有选项卡正常工作？

有没有办法让 JavaScript 在选取框内复制足够多的图像副本以自动填充视口的宽度？所以，如果我只放三个图像，它们将被复制（按顺序），直到视口被填满，它会像这样无限地向左滚动。

堆栈片段：

for (let i = 1; i < 5; i += 1) {
  marqueeInit({
    uniqueid: `crawler-${i}`,
    style: {
      'height': '124px',
    },
    inc: 5,
    mouse: 'cursor driven',
    moveatleast: 2,
    neutral: 150,
    savedirection: true,
    random: false
  });
}
<script src="https://codepen.io/ali-z/pen/XQoVQQ.js"></script>

<div class="marquee-wrapper">
  <div id="crawler-1" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>

  <div id="crawler-2" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
  <div id="crawler-3" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
  <div id="crawler-4" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
</div>

4

0 回答 0