jQuery 轮换多个代码

Question

所以我有 3 个新闻行情要显示在页面顶部。（旁注：这些不是用于网站，它们是我公司更大的内部营销展示的一部分。该页面只会加载一次，然后将永远显示在四边形 70 英寸电视显示屏上）

我正在尝试在这些代码之间轮换。我想从第一个，到第二个，再到第三个，然后重新开始。所有这一切都必须在自动收报机旋转通过其中的所有 li 之后发生。

我想出了一个从第一个自动收报机到第二个自动收报机的方法，但无法通过它。

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

注意：在下面的 fiddle 中，我的 js 从第 222 行开始。所有其他 js 由 Aakash Chakravarthy 提供。

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

Answer 1

尝试用这个替换你的代码，这样它会检查勾号是否被隐藏，如果没有，它会启动循环它的超时。 JSFiddle

cycle();
function cycle(){
    if (tick1.css('display') !== 'none')
      setTimeout(function() {
        tick1.hide();
        tick2.show();
        cycle();
      }, $('.tick1 ul li').length * 1000);

    else if (tick2.css('display') !== 'none')
      setTimeout(function() {
        tick2.hide();
        tick3.show();
        cycle();
      }, $('.tick2 ul li').length * 1000);

    else if (tick3.css('display') !== 'none')
      setTimeout(function() {
        tick3.hide();
        tick1.show();
        cycle();
      }, $('.tick3 ul li').length * 1000);
}

Answer 2

这是您要找的东西吗？

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);
}

上面的代码循环遍历所有代码，并且不限于 3 个。您可以在该数组中添加所需的代码数量。您还可以在开始新的之前清除之前的 timeout。

FIDDLE HERE

编辑：Fiddle HERE 无限循环

jQuery 轮换多个代码

jQuery rotate through multiple tickers

javascript

jquery

html

css

ticker