如何使用 javascript 动态滚动 JSON 数组的内容

Question

我有一个 JSON 对象，它存储有关网站 RSS 提要的数据：

var varNameSpace = <?php echo json_encode($article); ?>;

我正在开发Ticker，我需要在<li>标签上显示所有对象元素并添加动态滚动的效果。 在我使用 javascript 函数来滚动之前，我的 javascript 函数看起来像：

<script>
var boutton=document.getElementById("start");
function startTicker(){
$("#news li:first").slideUp(function(){
$(this).appendTo($("#news")).slideDown();
});
}
boutton.onclick=setInterval(startTicker, 3000);
</script>

我的 HTML 页面如下所示：

<div>
<?php
foreach(getFeed() as $article){
?>

<ul id="news">
<li><h3><a href="<?php echo $article['link'] ?>"><?php echo $article['title']; ?></a></h3></li>
</ul>
<p>
<?php echo $article['description'];  ?>
</p>                
<?php
}
?>
</div>

一旦我执行这个页面，它只是列表中滚动其他列表元素的第一个元素被视为唯一元素。 那么，如何滚动所有列表元素？

Answer 1

我没有测试你的代码，但我怀疑li:first 与只选择第一个元素有关。

尽管如此，无需重新发明轮子，有一些很棒的插件可以轻松实现您的要求。

我以前用过的一个例子是http://richhollis.github.io/vticker/

它很容易实现，并且由于您已经在使用 jQuery，因此不需要您加载任何额外的库。

另一方面，如果您打算自己编写代码，Noel Killebrew 的这个 CodePen 看起来会是一个很好的起点https://codepen.io/noelietrex/pen/ZGGoZM