Imagelider到达尽头，无处可去

如何解决Imagelider到达尽头，无处可去

我有一个包含 5 个图像的图像滑块。单击按钮后，滑块移动到下一个图像。当到达终点时，它无处可去。我的目标是在滑块结束后显示第一张图片。

          <button class="btn">Test</button>
        </div>
      </body>
      <script>
        let button = document.querySelector(".btn");
        let slide = document.querySelector(".s1");
        let slideEl = document.querySelectorAll(".slide");
        let move = 0;

        button.addEventListener("click",() => {
          move -= 20;
          console.log(slideEl.length - 1);
          for (var i = 0; i < slideEl.length; i++) {
            slide.style.marginLeft = move + "%";
            if (i >= slideEl.length - 1) {
              console.log(slideEl.length - 1);
              slide.style.marginleft = "100%";
            }
          
          }
        });
      </script>

解决方法

  move -= 20;
  console.log(move);
  slide.style.marginLeft = move + "%";
  if (move <= -80) {
    move += 100;
  }

,

我使用了控制台并记录了移动元素。我看到它在每次点击时移动 -20%。我的问题是我针对该 if 语句定位了错误的元素。 mikesp 给了我一个很好的提示，见上文。现在，当它到达终点时，它会滑到起点。最后一张图片是-80%。那是第五个形象。也不需要 for 循环。