Javascript 带有jquery且不使用插件的新闻报价器

我有一个网站的一部分，我需要显示为一个新闻报价

看起来是这样的：

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

新闻1
新闻2
新闻3

我需要一个javascript代码来重复显示新闻，而不使用插件。其思想是显示一个

span

，隐藏其余

span

，并按顺序每

n

秒重复一次

---

我怎样才能做到这一点呢？

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

---

这里有一个工作演示>

类似这样的东西应该可以做到：

$(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中工作：

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

HTML:

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

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();

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

CSS:

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

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();

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

运行示例：

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

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();

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

---

进入下一个时段的触发因素是什么？新闻1应显示在新闻2之前，而新闻2应显示在新闻3之前。然后循环重复。setTimeout和hide（）/show（），这有什么困难？@epascarello我不知道如何创建一个无限循环。setTimeout，当你到达终点时，你回到起点。