连续循环遍历数组以创建水平股票行情

Posted 2023-05-09

【中文标题】连续循环遍历数组以创建水平股票行情

【英文标题】：Continuous loop through an array to create horizontal ticker

【发布时间】：2015-07-12 08:44:12

【问题描述】：

我想使用这个现有的 js 创建一个水平滚动条，以便我的数组滚动条与我页面上的其他单行新闻滚动条具有相同的动画和功能。

目前我的 js 将我的 3 li 转换为一个数组，然后将它们集中在一起并将它们作为一个块在股票行情的宽度上滚动。

$(document).ready(function() 
  var block_text = $('.ticker li').map(function()  return $(this).html();).toArray();
  $(".ticker").html("<p>" + block_text + "</p>");
  var ticker_text = $('.ticker p');
  var ticker_width = $(".ticker").width();
  var text_x = ticker_width;

  scroll_ticker = function() 
    text_x--;
    ticker_text.css("left", text_x);
    if (text_x < -1 * ticker_text.width()) 
      text_x = ticker_width;
    
  
  setInterval(scroll_ticker, 10);
);

#iFeatures 
  position: absolute;
  width: 76%;
  height: 73px;
  left: 0;
  bottom: 126px;
  background-color: rgba(0,39,62,.85);

.ticker 
  position: absolute;
  top: 25%;
  left: 40px;
  right: 10px;
  bottom: 10%;
  overflow: hidden;


.ticker p 
  position: relative;
  top: 0;
  white-space: nowrap;
  width: auto;
  color: white;


.ticker a 
  color: white;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="iFeatures">
    <div class="ticker">
        <li><a href="##">This is a test ticker 1.</a></li>
        <li><a href="##">This is a test ticker 2.</a></li>
        <li><a href="##">This is a test ticker 3.</a></li>
    </div>
</div>

在此处查看演示：https://jsfiddle.net/9va9r3n4/1/

我想做的是不断循环遍历这个数组，并以与原始块动画相同的方式为每个 li 设置动画。这是我尝试创建一个 for 循环来执行此操作，但它不起作用。

var myStringArray = $('.ticker li').map(function()  return $(this).html();).toArray();
var arrayLength = myStringArray.length;
var ticker_width = $(".ticker").width();

for (var i = 0; i < arrayLength; i++) 
    alert(myStringArray[i]);
    
    //Do something
    scroll_ticker = function() 
        ticker_width--;
        i.css("left", ticker_width);
    
    setInterval(scroll_ticker, 10);
    

#iFeatures 
  position: absolute;
  width: 76%;
  height: 73px;
  left: 0;
  bottom: 126px;
  background-color: rgba(0,39,62,.85);

.ticker 
  position: absolute;
  top: 25%;
  left: 40px;
  right: 10px;
  bottom: 10%;
  overflow: hidden;


.ticker p 
  position: relative;
  top: 0;
  white-space: nowrap;
  width: auto;
  color: white;


.ticker a 
  color: white;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="iFeatures">
    <div class="ticker">
        <li><a href="##">This is a test ticker 1.</a></li>
        <li><a href="##">This is a test ticker 2.</a></li>
        <li><a href="##">This is a test ticker 3.</a></li>
    </div>
</div>

在这里进行演示：https://jsfiddle.net/9va9r3n4/

欢迎所有可能帮助我完成此任务的建议。

【参考方案1】：

这是你可以做的。首先，我将 li 项目保留在数组中，而不仅仅是它们的文本。然后当一个项目通过 ticker 时，我在数组中循环并将股票代码的内容更改为数组中的下一个项目。这样每次每个项目都会穿过屏幕，然后从头开始循环。

保留元素而不是文本：

var block_arr = $('.ticker li a p').map(function()  return $(this).get(0);).toArray()

遍历数组并改变ticker的内容：

ticker_item = $(block_arr[
              (block_arr.indexOf(ticker_item.get(0)) + 1 == block_arr.length) ?
              0 :
              block_arr.indexOf(ticker_item.get(0)) + 1]);

$(".ticker").html(ticker_item);

这是DEMO。

【参考方案2】：

更新

尝试使用.queue()循环，为每个li设置动画

$(document).ready(function() 
    var cycles = 0;
    var ticker = $(".ticker");
    var items = ticker.find("li").css(
            "list-style": "none",
            "position": "relative"
    );
    items.hide();
    var _ticker = function () 
        return ticker.queue("ticker", $.map(items, function (el, i) 
            return function (next) 
                $(el).css("left", ticker.width())
                    .show()
                    .animate(
                    left: "-" + (ticker.width() - $(el).width() / 2)
                , 3000 // adjust `duration` of `el`:`li` "tick" here
                 , "linear", function () 
                    $(this).hide(0, next)
                )
            
        )).dequeue("ticker").promise("ticker")
    ;
    (function cycle() 
      _ticker().then(function (el) 
        // do stuff when all `li` within `ticker` have completed animations,
        // increment `cycles` , log cycles completed, 
        // call `cycle()` for infinite loop of `_ticker()`      
        ++cycles;
        console.log(cycles + " `_ticker` cycles completed", el);
        cycle()
      )
    ())
);

#iFeatures 
  position: absolute;
  width: 76%;
  height: 73px;
  left: 0;
  bottom: 126px;
  background-color: rgba(0, 39, 62, .85);

.ticker 
  position: absolute;
  top: 25%;
  left: 40px;
  right: 10px;
  bottom: 10%;
  overflow: hidden;

.ticker p 
  position: relative;
  top: 0;
  white-space: nowrap;
  width: auto;
  color: white;

.ticker a 
  color: white;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="iFeatures">
  <div class="ticker">
    <li><a href="##">This is a test ticker 1.</a>
    </li>
    <li><a href="##">This is a test ticker 2.</a>
    </li>
    <li><a href="##">This is a test ticker 3.</a>
    </li>
  </div>
</div>

jsfiddle https://jsfiddle.net/9va9r3n4/4/

【讨论】：

如果你仔细阅读这个问题，虽然它很长，但它并没有说任何地方都有垂直滚动。它说continuously loop through this array and animate each li the same way that the original block was being animated。您甚至没有阅读问题！

@RaeenHashemi 是的，你是对的。阅读问题。不确定为什么，这里是如何解释“垂直”的。感谢您提供“downvote”原因，描述！

@RaeenHashemi 之前一定经历过“眩晕”:) 干杯