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

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：幻灯片

标签： javascripthtmlcsssetinterval

Answer 1

您需要反转效果，因为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);