使用setTimeout動態創建多個幻燈片演示

我想在單擊按鈕時創建「SliderArray」數組中對象數量的幻燈片放映。使用setTimeout動態創建多個幻燈片演示

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

在這裏，我的對象

來源

2017-03-21 Muhammet Can TONBUL

這是有點不清楚你到底想要達到什麼目的。當我點擊它時，JSFiddle似乎可以循環使用顏色。「什麼東西變得混亂了」是什麼意思？ – TrampolineTales

當您點擊按鈕時，只有頂部幻燈片正在工作。「滑塊數組」對象內有2個滑動對象。我想要的是當點擊按鈕時這兩個幻燈片演示的操作。我沒有用循環解決這個問題。 –

這是「混亂」，因爲你從來沒有操縱第二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

來源

2017-03-21 12:59:55 Erazihel

完美和簡單的解決方案沒有frametime問題我正在爲此工作..謝謝你兄弟.. –

使用setTimeout動態創建多個幻燈片演示

回答

相關問題