问题描述
我有一个包含 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>
解决方法
move -= 20;
console.log(move);
slide.style.marginLeft = move + "%";
if (move <= -80) {
move += 100;
}
,
我使用了控制台并记录了移动元素。我看到它在每次点击时移动 -20%。我的问题是我针对该 if 语句定位了错误的元素。 mikesp 给了我一个很好的提示,见上文。现在,当它到达终点时,它会滑到起点。最后一张图片是-80%。那是第五个形象。也不需要 for 循环。