如何让这个脚本具有无限循环？

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>