Slider 每次滑动不超过一次迭代 (JavaScript)

Question

我有一个 slider 上面有 4 篇文章。 我可以让它通过 1 篇文章单向滑动，但似乎无法让它在第二次单击“左”按钮时重复该动作。 我不确定问题是计数器还是转换值？ 我确实需要使用transform而不是left或right ，因为我需要它在 animation 上以 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之外添加事件侦听器。 如果您使用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>