通过阵列连续循环创建水平滚动条

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/

我想要做的就是不断通过循环这个数组和动画的每个李以同样的方式为原始块正在动画。这是我尝试创建一个for循环来做到这一点，但它不起作用。 https://jsfiddle.net/9va9r3n4/

打开任何和所有的建议，可以帮助我实现这一点：

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>

正在进行演示在这里工作。

Answer 1

这里是你可以做什么。首先，我将li项目保留在数组中，而不仅仅是它们的文本。然后，当一个项目通过ticker，我循环在数组中，并将ticker的内容更改为数组中的下一个项目。这种方式每次每个项目将通过屏幕，然后从开始循环回来。

保持不元素中的文本：

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。

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/