javascript - 连续循环数组以创建水平滚动条

Question

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

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

$(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/

我想做的是连续循环这个数组，并以与原始 block 动画相同的方式为每个 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 项保留在数组中，而不仅仅是它们的文本。然后，当一个项目通过股票代码时，我在数组中循环并将股票代码的内容更改为数组中的下一项。这样每次每个项目都会经过屏幕，然后从头开始循环。

保留元素而不是文本:

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

循环遍历数组并更改股票代码的内容:

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 .