Imageslider 到达终点并无处可去

Question

我有一个包含 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>

Answer 1

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

Answer 2

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

Imageslider 到达终点并无处可去

Imageslider reaches the End and goes to nowhere

javascript

css

image

slider