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

我正在创建jQuery文本轮播

小提琴: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);

最佳答案

您可以使用另一个setInterval函数。这是小提琴: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)