如何重置querySelectorAll号码？

Question

我有 5 个

li

，当达到相同的次数时，该函数就会停止重复。我需要另一个功能来重置或取消这个号码。

这是我的代码：

let currentIndex = 0;

function toMove() {
  const slider  = document.querySelector('#thumbelina0');
  const element = document.querySelectorAll('li')[currentIndex];
  slider.style.marginLeft = parseInt(slider.style.marginLeft) 
                          - element.offsetWidth - 10 + 'px';
  currentIndex += 1;
}

<div id="thumbelina" style="padding:5px;overflow: hidden;">
  <button class="btnToLeft" onclick="toMovel()">
    <
  </button>
  <ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
  </ul>
  <button class="btnToRight" onclick="toMove()">
    >
  </button>
</div>

Answer 1

似乎您正在实现轮播功能来显示不同的图像。 当到达数组的最后一个索引时，您可以使用条件语句将

currentIndex

重置为

0

。

function toMove() {
  const slider  = document.querySelector('#thumbelina0');
  const element = document.querySelectorAll('li');

  // 1. Get the length of array
  const numOfElements = element.length;

  slider.style.marginLeft = parseInt(slider.style.marginLeft) 
                          - element.offsetWidth - 10 + 'px';

  currentIndex += 1;

  // 2. Reset if index reaches last element's index
  if (currentIndex === numOfElements-1)
        currentIndex=0;
}