使用setInterval（）一个接一个的循环函数

问题描述：

我的目的是显示前3张幻灯片x次数，然后显示下3张幻灯片x次数，之后前3张幻灯片将再次显示，尺蠖。我该怎么做？使用setInterval（）一个接一个的循环函数

下面是代码我已经但是我会被卡住，当我需要 “重启” 的一切：

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/

这似乎过于复杂。通过'setInterval'调用一个'处理程序'调用，它知道它应该显示哪一组幻灯片（在基本级别通过全局变量，或通过attr或通过插件本地变量） –

答

我最喜欢的是做一个可以通过循环处理的函数，把参数变成一个数组然后循环索引。这里，我们去：

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/

谢谢，它的工作原理:) –

使用setInterval（）一个接一个的循环函数

相关推荐