jQuery 在多个代码中轮换

jQuery rotate through multiple tickers

本文关键字：代码 jQuery      更新时间：2023-09-26

所以我有 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/

这是你要找的东西吗？ 

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

在这里摆弄

编辑：在这里摆弄无限循环

尝试用这个替换你的代码，以便它检查时钟周期是否被隐藏，如果没有，它将启动超时以循环它。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);
}
相关文章：