如何解决滑块不滑动不止一次迭代JavaScript
我有一个滑块,上面有 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>
解决方法
一个问题是,您只需要添加一次事件侦听器,而无需在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。