Javascript 使用setTimeout动态创建多个幻灯片放映

我想在单击按钮时创建“SliderArray”数组中对象数量的幻灯片

电流在独立模式下可用

当我将函数引入循环时，事情会变得一团糟

var myFunction = function() {
if (counter == 0) {
  $('#' + sliderarray[0].slaytarray[counter].id).fadeIn();
  frametime = sliderarray[0].slaytarray[counter].frame_time * 1000;
  counter++;
} else if (counter == sliderarray[0].slaytarray.length) {
  $('#' + sliderarray[0].slaytarray[counter - 1].id).fadeOut();
  counter = 0;
  frametime = 0;
} else {
  $('#' + sliderarray[0].slaytarray[counter - 1].id).fadeOut();
  $('#' + sliderarray[0].slaytarray[counter].id).fadeIn();
  frametime = sliderarray[0].slaytarray[counter].frame_time * 1000;
  counter++;
}

timeout = setTimeout(myFunction, frametime);

}

var timeout = setTimeout(myFunction, frametime);

这里是我的物品

这是“混乱的”，因为您从未操作过第二个

滑块

我通过在
幻灯片阵列上使用
.forEach
修复了它：

var myFunction = function() {
    if (counter == 0) {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter].id).fadeIn();
            frametime = slider.slaytarray[counter].frame_time * 1000;
        });
        counter++;
    } else if (counter == sliderarray[0].slaytarray.length) {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter - 1].id).fadeOut();
        });
        counter = 0;
        frametime = 0;
    } else {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter - 1].id).fadeOut();
            $('#' + slider.slaytarray[counter].id).fadeIn();
            frametime = slider.slaytarray[counter].frame_time * 1000;
    });
    counter++;
}

帧时仍然存在问题，因为在需要两个帧时只使用一次。我就让你调查一下

看
你到底想达到什么目标还不清楚。当我单击JSFIDLE时，它似乎会循环使用各种颜色。你说的“事情变得一团糟”是什么意思？当你点击按钮时，只有最上面的幻灯片在工作。在“滑块阵列”对象内有2个幻灯片对象。我想要的是点击按钮时这两个幻灯片放映的操作。我不是用循环来解决这个问题的。完美而简单的解决方案，没有帧时问题。我是为此而工作的。谢谢兄弟。。