jQuery通过多个股票轮换答案

【问题标题】：jQuery rotate through multiple tickersjQuery通过多个股票轮换
【发布时间】：2016-01-15 14:56:16
【问题描述】：

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

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

我想出了一种从第一个到第二个行情的方法，但无法超越。

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

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

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

【问题讨论】：

你真的不应该像你正在做的那样依赖你的代码时间。您应该向 Aakash Chakravarthy 提供的代码添加一个回调，它会告诉您何时循环到下一个“标题”。

标签： javascript jquery html css ticker

【解决方案1】：

这是您要找的东西吗？

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 之前清除之前的timeout。

FIDDLE HERE

编辑：小提琴HERE无限循环

【讨论】：

这不像提问者想要的那样工作；它不会循环回到开头。
看那个小提琴。一旦到达末尾，它就会从第一个元素开始。
好的。检查你的代码顺便说一句。它不工作。你阻塞了 ui 线程。
我是？糟糕，谢谢。这可能就是它运行得非常糟糕的原因（或者它又是我的电脑）。
@RonnieEXP 我为相同问题的无限循环机制添加了另一个小提琴

【解决方案2】：

尝试用此替换您的代码，以便检查刻度是否隐藏，如果没有，它将启动超时以循环它。 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);
}

【讨论】：