javascript - 如何用一组数组制作文本轮播

Question

我正在创建 jQuery 文本轮播

fiddle :https://jsfiddle.net/wdfz70vx/

每隔 5 秒我想更改我的数组集，就像我正在使用 arraySliderText[] 一样，5 秒后我想切换到 arraySliderText2[]

 <h3 id="arrivedSlider"></h3>

JS

var arraySliderText = ['D', 'E', 'S', 'I', 'G', 'N', ' ',
'I', 'S', ' ', 'A', ' ', 'J', 'O', 'U', 'R', 'N', 'E', 'Y',
' ', 'O', 'F', ' ', 'D', 'I', 'S', 'C', 'O', 'V', 'E', 'R', 'Y'];

var arraySliderText2 = ['D', 'E', 'S', 'I', 'G', 'N',
' ', '&', ' ', 'D', 'I', 'S', 'C', 'O', 'V', 'E', 'R', 'Y'];

var searchReturnText = '';
var z = 0;
var sliderFinalText = $('#arrivedSlider');

var intervalText = setInterval(function () {

    searchReturnText = searchReturnText + arraySliderText[z];
    sliderFinalText.text(searchReturnText);

    if (z == arraySliderText.length - 1) {
        clearInterval(intervalText);
    }

    z++;

}, 100);

Answer 1

您可以使用另一个 setInterval 函数。这是 fiddle :https://jsfiddle.net/wdfz70vx/7/

var arraySliderText = {
    0 : ['D','E','S','I','G','N' ,' ', 
'I' ,'S' ,' ', 'A', ' ','J','O','U','R','N','E','Y', 
 ' ' ,'O' ,'F',' ', 'D','I','S','C','O','V','E','R','Y'],        
    1: ['D','E','S','I','G','N' ,' ', '&' , ' ', 'D','I','S','C','O','V','E','R','Y']
};

var sliderFinalText = $('#arrivedSlider');  
function animateText(arraySliderText){
    var searchReturnText  = '';
    var z = 0;
    var intervalText = setInterval(function() { 
        searchReturnText = searchReturnText + arraySliderText[z];   
        sliderFinalText.text(searchReturnText);

        if(z == arraySliderText.length - 1) {
            clearInterval(intervalText);
        }
        z++;
    }, 100);    
}           

animateText(arraySliderText[0]);
var i = 1;  
setInterval(function() {        
    $('#arrivedSlider').text('');       
    animateText(arraySliderText[i]);       
    if(i == 1) 
        i = 0;
    else
        i++;        
}, 5000)