setTimeoutを使用して複数のスライドショーを動的に作成する

Question

ボタンをクリックすると、「SliderArray」配列内のオブジェクト数のスライドショーを作成します。

現在のJSfiddleは、スタンドアロンモードで利用できます。私はループに機能を取る

すると、物事はあなたが二sliderを操作することはありませんので、これは「汚い」で乱雑

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

を取得します。

私は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++; 
} 

2が必要なときに一度だけ使用しているのでframetimeのための問題がまだあります。私はあなたにそれを見てみましょう。

は、それはあなたが達成したいまさに少しは不明だupdated JSFiddle