javascript - 带有 jquery 且不使用插件的新闻自动收报机

Question

我在网站中有一部分需要显示为新闻行情。

它看起来像这样：

<div class="news">
  <span>NEWS 1</span>
  <span>NEWS 2</span>
  <span>NEWS 3</span>
</div>

我需要一个 javascript 代码来重复显示新闻而不使用插件。这个想法是显示span并隐藏其余部分，spans并每秒钟按顺序重复n。

我怎样才能做到这一点 ？

Answer 1

像这样的事情怎么样（显然改变间隔以满足您的需要，以毫秒为单位）：

$(function() { 
    var num_stories = $('.news > span').length,
        news_interval = 1000,
        current_story = 0;

    $('.news > span:gt(0)').hide();

    window.setInterval(function() {  
        var next_story = (current_story == (num_stories - 1)) ? 0 : current_story + 1;
        $('.news > span:eq(' + current_story + ')').hide();
        $('.news > span:eq(' + next_story + ')').show();
        current_story = next_story;
    }, news_interval);
});

这是一个工作演示 > http://jsfiddle.net/J35Sa/

Answer 2

这样的事情应该这样做：

$(function() {
    var $items = $('div.news > span').hide();
    var curIndex = 0;
    setInterval(function() {
        $items.hide();

        curIndex++;
        if(curIndex >= $items.length) {
            curIndex = 0;
        }
        $items.eq(curIndex).show();
    }, 2000);
});

你可以看到它在这个 jsfiddle 中工作：http: //jsfiddle.net/YxbRL/

Answer 3

它的 HTML 标记作为列表比随机跨度更有意义。所以我改变了它。

HTML：

<ul class="news">
  <li>NEWS 1</li>
  <li>NEWS 2</li>
  <li>NEWS 3</li>
</ul>

JavaScript：

var lis = $(".news li");
function showNext() {
  var next = lis.filter(".active").removeClass("active").next();
  if (next.length == 0) {
    next = lis.first();
  }
  next.addClass("active");
  window.setTimeout(showNext,5000);
}
showNext();

CSS：

.news li.active {
  display:block;
}
.news li {
  display:none
}

运行示例：

JSFiddle