Question

我正在创建jQuery文本Carousel

每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

以下是您和DEMO

的代码

          var animContoller = function(){

       this.interval = '';
       this.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'];
       this.arraySliderText2 = ['D', 'E', 'S', 'I', 'G', 'N',
           ' ', '&', ' ', 'D', 'I', 'S', 'C', 'O', 'V', 'E', 'R', 'Y'];

       this.slideType =1;
       this.searchReturnText = '';
       this.z = 0;

       this.sliderFinalText = $('#arrivedSlider');
       //this.createInterval();

   };

    animContoller.prototype.createInterval = function(){
        var arr = this.arraySliderText;
        if(this.slideType == 2){
            arr = this.arraySliderText2;
        }

        var _this = this;
        this.interval = window.setInterval(function(){

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

            if (_this.z == arr.length - 1) {
                _this.clearInterval();
            }

            _this.z++;

        },100)
    };

    animContoller.prototype.clearInterval = function(){
        window.clearInterval(this.interval);


        this.sliderFinalText.innerHTML = '';
        this.z = -1;
        this.searchReturnText = ''


        if(this.slideType == 1){
            this.slideType = 2;
        }else{
            this.slideType = 1;
        }
        this.createInterval();

    }

    var a = new animContoller();
a.createInterval();

Answer 2

您可以使用其他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)

Answer 3

尝试使用多个setTimeout()：

var slider = document.getElementById('arrivedSlider');
var sliderText = [
  ['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'
  ],
  ['D', 'E', 'S', 'I', 'G', 'N',
    ' ', '&', ' ', 'D', 'I', 'S', 'C', 'O', 'V', 'E', 'R', 'Y'
  ]
];

var animator = function(arr) {
  var j = 0;
  var txt = '';
  var dly = 150;
  var fn = function() {
    if (j >= arr.length) {
      setTimeout(mainLoop, 5000);
      return;
    }
    txt += arr[j++];
    slider.innerHTML = txt;
    setTimeout(fn, dly);
  };
  setTimeout(fn, dly);
};

var i = 0;
var mainLoop = function() {
  animator(sliderText[i]);
  i = (1 + i) % sliderText.length;
};
mainLoop();

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

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

3 个答案: