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

Question

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

当前JSfiddle在独立模式下可用。

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

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

这是我的元素

Answer 1

这是“困惑的”，因为您永远不会操作第二个 slider 。

我通过在 sliderarray 上使用 .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++;
}

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

参见 updated JSFiddle