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

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

1 个答案: