图像滑块到达尽头，无处可去答案

【问题标题】：Imageslider reaches the End and goes to nowhere图像滑块到达尽头，无处可去
【发布时间】：2021-02-27 16:32:37
【问题描述】：

我有一个图片滑块，里面有 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>

【问题讨论】：

看起来您从 marginLeft = 0 开始，但最后将其设置为 100%。尝试再次将其设置为 0。还要注意重置语句中 marginLeft 中的大写“L”。
感谢您的回答，但如果我使用 0，单击按钮后它不会移动。
我认为您的设置有误。如果没有看到您的 HTML 代码，我无法确定，但每次您按下按钮时，Javascript 都会遍历所有 5 个元素。我假设您想将图像向左移动 20%。每次点击。在这种情况下使用：button.addEventListener("click", () => { move -= 20; console.log(slideEl.length - 1); slide.style.marginLeft = move + "%"; if (move <= -100) { console.log(slideEl.length - 1); move = 0; slide.style.marginLeft = "0"; } });
当我做 slide.style.marginLeft = "0";当我点击按钮时它不再移动了。