setInterval 在创建幻灯片效果时不起作用 for 循环

Question

我想使用 setInterval 创建一个幻灯片来运行自动，但我没有看到它迭代！

每 2 秒后：幻灯片 1 ->幻灯片 2 ->幻灯片 1 ->幻灯片 2 ->...

这是我的代码：

// debugger;
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
for (let i = 0; i < slide.length; i++) {
for (let j = 0; j < getValue1.length; j++) {
getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
}
// if (i >= slide.length - 1) {
//     for (let j = 0; j < getValue1.length; j++) {
//         getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
//         getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
//     }
// }
}
}, 2000);

链接 codepen.io：幻灯片

Answer 1

问题是您只设置将幻灯片 1 移动到幻灯片 2 的切换效果。您需要添加将幻灯片 2 移回幻灯片 1 的切换效果。

// debugger;
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slideIndex = 0;
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
for (let i = 0; i < slide.length; i++) {
for (let j = 0; j < getValue1.length; j++) {
if (slideIndex === 0) {
getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
} else {
getValue1[j].style.transform = "";
getValue2[j].style.transform = "";
}
}
// if (i >= slide.length - 1) {
//     for (let j = 0; j < getValue1.length; j++) {
//         getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
//         getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
//     }
// }
}
slideIndex = slideIndex === 0 ? 1 : 0;
}, 2000);

Answer 2

我认为问题是您设置了一次过渡，并且永远不会再次重置它们。因此，循环运行并为每个元素触发相同的过渡，这就是动画只运行一次的原因。

您必须在不可见的元素上重置动画，以便您可以在下一个循环中再次对这些元素进行动画处理。

Answer 3

尝试将外观移出setInterval

var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var slideNum = 0;
var autoRunSlider = setInterval(function() {
for (let j = 0; j < getValue1.length; j++) {
getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
}
slideNum++;
if (slideNum >= slide.length) {
clearInterval(autoRunSlider);
}
}, 2000);

Answer 4

您需要反转效果，因为多次设置transform属性只能工作一次。

// debugger;
let effect1 = true; // Counter for choosing which effect to take
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
for (let i = 0; i < slide.length; i++) {
for (let j = 0; j < getValue1.length; j++) {
if (effect1) {
getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
} else { // Reverse the effect
getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
}
}
}
effect1 = !effect1
}, 2000);