使用setInterval（）一個接一個的循環函數

Question

我的目的是顯示前3張幻燈片x次數，然後顯示下3張幻燈片x次數，之後前3張幻燈片將再次顯示，尺蠖。 我該怎麼做？

下面是代碼我已經但是我會被卡住，當我需要 「重啓」 的一切：

HTML樣本：

<div class="contents"> 
<div class="transit"> 
    <div class="content ctransit_" id="ct_1" > 
     <div class="main_transit" >  <h1>1.1slide</h1> </div> 
    </div> 
    <div class="content ctransit_" id="ct_2" > 
     <div class="main_transit"> <h1>1.2slide</h1> </div> 
    </div> 
    <div class="content ctransit_" id="ct_3" > 
     <div class="main_transit"> <h1>1.1slide</h1> 
    </div> 
</div> 
<div class="arrived"> 
    <div class="content carrived_ " id="ct_1" > 
     <div class="main_arrived"> <h1>2.1slide</h1> </div> 
    </div> 
    <div class="content carrived_" id="ct_2" > 
     <div class="main_arrived"> <h1>2.2slide</h1> </div> 
    </div> 
    <div class="content carrived_" id="ct_3"> 

     <div class="main_arrived"> <h1>2.3slide</h1></div> 
    </div> 
</div> 
</div> 

JS：

var c=0; 
var k=0; 

function setIntervalX(interationFunction, delay, repetitions, callbackFunction) { 
var x = 0; 
var intervalID = window.setInterval(function() { 

    interationFunction(); 

    if (++x === repetitions) { 
     callbackFunction(); 
     window.clearInterval(intervalID); 
    } 
}, delay);} 


$(".carrived_").hide(); 
    $(".ctransit_").not(":first").hide(); 

    setIntervalX(
    function() { 
    $(".ctransit_:gt(0)").hide(); 
     $('.ctransit_:first') 
       .slideUp(1000) 
       .next().addClass(inClass) 
       .slideDown(1500) 
       .end().addClass(outClass) 
       .appendTo('.contents .transit '); 

     console.log(c++) // this executed every time the interval triggers 
    },3000, 5, 
    function() {  
     $(".transit").hide(); 
     $(".ctransit_").hide(); 

     $(".carrived_:first").show().addClass(inClass) 
      $(".carrived_").not(":first").hide(); 


      var x = 0; 

     var intervalID = window.setInterval(function() { 

     $(".carrived_:gt(0)").hide(); 
     $('.carrived_:first') 
     .slideUp(1000) 
     .next().addClass(inClass) 
     .slideDown(1500) 
     .end().addClass(outClass) 
     .appendTo('.contents .arrived '); 
         if (++x === 5) { 
          window.clearInterval(intervalID); 
         } 
     console.log(x) 
     }, 3000); 
// this will be executed after the interval triggered 5 times 
// so after round about 5 seconds after setIntervalX was started 
} 

https://jsfiddle.net/kqLkLwrk/4/

Answer 1

我最喜歡的是做一個可以通過循環處理的函數，把參數變成一個數組然後循環索引。 這裏，我們去：

function showSlide(arr,index){ 
    if(arr.length==0) return; 
    if(index>=arr.length) index=0; 
    var cur = arr[index]; 
    var target = cur[0]; 
    var container = cur[1]; 
    var delay = cur[2]; 
    var rep = cur[3]; 

    $(".ctransit_").hide(); 
    $(".carrived_").hide(); 
    $(target).first().show(); 
    setIntervalX(function() { 
     $(target).not(":first").hide(); 
     $(target).first().show() 
      .slideUp(1000) 
      .next().addClass(inClass) 
      .slideDown(1500) 
      .end().addClass(outClass) 
      .appendTo(container); 

     console.log(c++) 
     // this executed every time the interval triggers 
    },delay,rep, function(){ 
     index++; 
     showSlide(arr,index); 
    }); 
} 

showSlide([ 
    [".ctransit_",'.contents .transit',3000,6], 
    [".carrived_",'.contents .arrived',3000,5] 
],0); 

https://jsfiddle.net/kqLkLwrk/4/