javascript - slider 每次滑动不超过一次迭代 (JavaScript)

Question

我有一个 slider ，上面有 4 篇文章。我可以让它以 1 篇文章的方式单向滑动，但似乎无法让它在第二次单击“左”按钮时重复该操作。我不确定问题出在计数器还是转换值？我确实需要使用 transform 而不是 left 或 right 因为我需要它在动画上以 60fps 的速度执行。

代码笔:https://codepen.io/emilychews/pen/vYXJyqZ

var leftButton = document.getElementById("left-button"),
  rightButton = document.getElementById("right-button"),
  article = document.querySelectorAll(".article"),
  counter = 0,
  articleWidth = article.offsetWidth;

if (counter <=1) {
  leftButton.addEventListener("click", function () {
    article.forEach(function (item) {
      item.style.transform = "translateX(-100%)";
      item.style.transition = "all 2s";

      counter += 1;
    });
  });
}

if (counter < article.length) {
  rightButton.addEventListener("click", function () {
    article.forEach(function (item) {
      item.style.transform = "translateX(0)";
      item.style.transition = "transform 2s";

      counter -= 1;
    });
  });
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  width: 50%;
  background: red;
  overflow: hidden;
  margin-bottom: 2rem;
}

.article-wrapper {
  display: flex;
  width: 160%;
}

.article {
  width: 70%;
  background: blue;
  margin: 0 1rem;
  padding: 4rem 1rem;
}

p {
  color: white;
}

<div class="row">
  <div class="article-wrapper">
    <article class="article">
      <p>Article 1</p>
    </article>
    <article class="article">
      <p>Article 2</p>
    </article>
    <article class="article">
      <p>Article 3</p>
    </article>
    <article class="article">
      <p>Article 4</p>
    </article>
  </div>
</div>
<button id="left-button">Left</button>
<button id="right-button">Right</button>

Answer 1

一个问题是您只需添加一次事件监听器，而无需根据计数器 添加事件监听器。如果您使用 counter 方法，则可以在满足所需条件时在点击处理程序中尽早返回。

下一个问题是您的“左”处理程序不会工作不止一次，因为您的转换必须是 100 * 计数器转换。以下代码与您的初始设计非常接近，但通常可以正常工作。

var leftButton = document.getElementById("left-button"),
  rightButton = document.getElementById("right-button"),
  article = document.querySelectorAll(".article"),
  counter = 0,
  articleWidth = article.offsetWidth;


leftButton.addEventListener("click", function () {
  if (counter === article.length) return;
  counter += 1;
  article.forEach(function (item) {
    item.style.transform = `translateX(-${counter}00%)`;
    item.style.transition = "all 2s";
  });
});

rightButton.addEventListener("click", function () {
  if (counter === 0) return;
  counter -= 1;
  article.forEach(function (item) {
    item.style.transform = "translateX(0)";
    item.style.transition = "transform 2s";
  });
});

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  width: 50%;
  background: red;
  overflow: hidden;
  margin-bottom: 2rem;
}

.article-wrapper {
  display: flex;
  width: 160%;
}

.article {
  width: 70%;
  background: blue;
  margin: 0 1rem;
  padding: 4rem 1rem;
}

p {
  color: white;
}

<div class="row">
  <div class="article-wrapper">
    <article class="article">
      <p>Article 1</p>
    </article>
    <article class="article">
      <p>Article 2</p>
    </article>
    <article class="article">
      <p>Article 3</p>
    </article>
    <article class="article">
      <p>Article 4</p>
    </article>
  </div>
</div>
<button id="left-button">Left</button>
<button id="right-button">Right</button>