使用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);

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

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

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);