具有递归功能的轮播

问题描述

我正在尝试使用递归功能使该轮播工作。假设我在CSS上定义了三个类，并在它们上附加了过渡（默认，屏幕上，屏幕外）。我的想法是从默认情况下调用图像，并在它们上添加动态类，然后将它们发送到屏幕外并返回队列。图片数量为4。在我添加了使旋转木马永远运行所需的条件语句之前，旋转木马一直在工作。

我用索引0调用moveKitties函数，并且该函数在0之后不自动调用自身。知道其中有什么问题吗？

(function() {

    var kitty = document.querySelectorAll(".kitty-container img");
      
    function moveKitties(n) {
        kitty[n].classList.remove("onscreen");
        kitty[n].classList.add("offscreen");
        if (n === 3) {
            kitty[0].classList.add("onscreen");
            setTimeout(function () {
                moveKitties(0);
            },3000);
        } else {
            kitty[n+1].classList.add("onscreen");
            setTimeout(function () {
                moveKitties(n);
            },3000);
        }
    }

    document.addEventListener("transitionend",function(e) {
        if (e.target.style.right == 0) {
            // console.log(e);
            e.target.classList.remove("offscreen");
        }
    });

    
    setTimeout(moveKitties(0),3000);
})();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

carousel javascript recursion