如何讓這個腳本具有無限循環？

Question

Javascript/jquery專家，

我有這個腳本。

的JavaScript

$(document).ready(function(){ 
    var number = 1; 
    var timer = setInterval(function() { 
    if(number == 1){str = "Professionl Designer"} 
    else if(number == 2){str = "Professionl Marketer"} 
    else if(number == 3){str = "Professionl Programmer"} 
    else if(number == 4){str = "Professionl Developer"}  
    $("#test").html("<div>"+ str+"</div>").fadeTo(600, 0.1).fadeTo(600, 1.0); 
    ++number; 
    if(number == 5){ 
     clearInterval(timer); 
    } 
    }, 2500); 
}); 

HTML

<div id = "test"></div> 

檢查其fiddle

該腳本顯示上次冠軍後停止。

它應該在連續循環中顯示最後一個標題後再次顯示第一個標題。

Answer 1

重置次數每次循環

$(document).ready(function() { 
 
    var pro = ["Professional Designer", 
 
      "Professional Marketer", 
 
      "Professional Programmer", 
 
      "Professional Developer"]; 
 

 
    var number = 0; 
 
    var timer = setInterval(function() { 
 
    
 
    $("#test").html("<div>" + pro[number] + "</div>").fadeTo(600, 0.1).fadeTo(600, 1.0); 
 
    ++number; 
 
    if (number == 4) { 
 
     number = 0; 
 
    } 
 
    }, 2500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
</div>

或更短後，與國防部%

$(document).ready(function() { 
 
    var pro = ["Professional Designer", 
 
      "Professional Marketer", 
 
      "Professional Programmer", 
 
      "Professional Developer"]; 
 

 
    var number = 0; 
 
    var timer = setInterval(function() { 
 
    
 
    $("#test").html("<div>" + pro[number] + "</div>").fadeTo(600, 0.1).fadeTo(600, 1.0); 
 
    number = (number+1) %4; 
 
    
 
    }, 2500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
</div>