jQuery rotate through multiple tickers

Question

So I have 3 news tickers that I want to display at the top of a page. (Sidenote: these aren't for a website, they're a part of a bigger internal marketing display for my company. The page will only be loaded one time, and then will sit on a quad 70 inch TV display forever)

I'm trying to rotate between these tickers. I want to go from the first one, to the second, to the third, and restart that. All of this has to happen AFTER the ticker has rotated through all the li's within it.

I came up with a way to get from the first to the second ticker, but can't get past that.

 if (tick1.css('opacity') == '1')
    setTimeout(function() {
      tick1.hide();
      tick2.show();
    }, $('.tick1 ul li').length * 1000);

NOTE: in the fiddle below, my js starts on line 222. All other js is provided by Aakash Chakravarthy.

https://jsfiddle.net/3yhaynpz/2/

Answer 1

Is this something you're looking for?

var tickers = ['.tick1','.tick2','.tick3'];

for(var i=0;i<tickers.length;i++){

    (function(i){

      var $currentTicker = $(tickers[i]);
      var $nextTicker;

      if(i==tickers.length-1)
        $nextTicker= $(tickers[0]);
      else 
        $nextTicker= $(tickers[i+1]);


      setTimeout(function() {
          $currentTicker.hide();
          $nextTicker.show();
      },$currentTicker.find('ul li').length * 1000 * (i+1));

    })(i);
}

Code above cycles through all your tickers and is not limited to 3. You can add how many tickers you want in that array. You can also clear your previous timeout before starting a new one.

FIDDLE HERE

EDIT: Fiddle HERE for infinite loop