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

Question

我想使用这个现有的 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/

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

Answer 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。

Answer 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/