0

我的网站上有一个部分，我想在上面显示一些警报或新闻。我想显示第一个新闻 x 秒，然后转到第二个新闻 x 秒，不再显示第一个新闻，然后到第三个，不显示第二个 .. 等等。我只是从 javascript 开始，然后我正在制作的代码只运行一次然后停止我希望这个继续无限或一个非常高的数字，以便人们可以在页面上看到新闻警报。一个接一个地。

我很感激我能得到的任何帮助。请给我看一个完整的代码，因为自从我大约 2 周前开始做这件事以来，我有点不适应。谢谢！

html:

    <div id="news1">Here are some news! 1111</div>
    <div id="news2">Here are some news! 2222</div>
    <div id="news3">Here are some news! 3333</div>

CSS：

#news1, #news2, #news3{

    visibility:hidden;
}

Javascript：

    function showIt() {
        document.getElementById("news1").style.visibility = "visible";
        document.getElementById("news3").style.visibility = "hidden";
        document.getElementById("news2").style.visibility = "hidden";

    }
    setInterval("showIt()", 3000); 
    function showIt2(){
        document.getElementById("news2").style.visibility  = "visible";
        document.getElementById("news1").style.visibility = "hidden";
        document.getElementById("news3").style.visibility = "hidden";
    }
    setInterval("showIt2()", 6000)
    function showIt2(){
        document.getElementById("news2").style.visibility  = "visible";
        document.getElementById("news1").style.visibility = "hidden";
        document.getElementById("news3").style.visibility = "hidden";
        setInterval("showIt3()", 3000);
    }
4

4 回答 4

2

在不更改 CSS/HTML 的情况下，下面的代码将处理任意数量的元素，您只需将它们的 ID 作为参数发送：

function showAlternate(ids, interval, currentVisible) {
    if (currentVisible === undefined) currentVisible = ids.length-1; // last one
    document.getElementById(ids[currentVisible]).style.visibility = "hidden";
    var idToShow = ++currentVisible % ids.length;
    document.getElementById(ids[idToShow]).style.visibility = "visible";
    setTimeout(function() { showAlternate(ids, interval, idToShow); }, interval);
}
// example usage:
showAlternate(["news1", "news2", "news3", "news4", "news5"], 3000);

在这里演示 jsfiddle：

于 2013-08-14T03:58:25.200 回答
2

我已经改变了javascript代码的逻辑，如下所示，

var newsList = ["news1","news2","news3"];
var currIndex = newsList.length-1;
var timeoutObj;
function showNext() {
    document.getElementById(newsList[currIndex]).style.visibility = "hidden";
    if(currIndex >= newsList.length-1)
        currIndex = 0;
    else
        currIndex += 1;
    document.getElementById(newsList[currIndex]).style.visibility = "visible";
    timeoutObj = setTimeout(showNext,3000); 
}
showNext();

检查它是否对您有帮助.. 这是 jsfiddle http://jsfiddle.net/m63Up/

于 2013-08-14T04:27:38.510 回答
1

首先了解如何使用setInterval()。您指定 2 个参数作为call 和delay函数，指定两个调用之间的等待时间。

然后在你的例子中：

  • setInterval("showIt()", 3000); // 将每 3000 毫秒调用一次 showIt()
  • setInterval("showIt2()", 6000); // 将每 6000 毫秒调用一次 showIt2()
  • setInterval("showIt3()", 3000); // 将每 3000 毫秒调用一次 showIt3()（在 showIt2() 中等待 6000 毫秒后）

把它放在时间表上：

  • 0 毫秒：无
  • 3000 毫秒：调用 showIt()
  • 6000 毫秒：调用 showIt() 并调用 showIt2()
  • 9000 毫秒：调用 showIt() 并调用 showIt3()
  • 12000 毫秒：调用 showIt()，调用 showIt2()，调用 showIt3()
  • 15000 毫秒：调用 showIt() 并调用showIt3() 两次
  • ...

您应该尝试只使用一个 setInterval() 和应该调用选择下一个函数的变量。

var myIndex = 0;

setInterval(updateFunction, 3000);

function updateFunction(){
  switch(myIndex)
  {
    case 0: showIt();
    break;
    case 1: showIt2();
    break;
    case 2: showIt3();
    break;
  }
  ++ myIndex;
  if (myIndex > 2) myIndex = 0;
}

编辑添加到：http: //jsfiddle.net/fA4cu/

于 2013-08-14T04:03:56.247 回答
0

这个 Pure-JS 示例将使用您当前模式的任意数量的 div，因此您可以拥有 id “news4”、“news5”、“news6”等。

此外，您可以通过更改 INTERVAL 变量来更改显示的新闻更改频率，在此示例中，新闻将每 1 秒更改一次。

JSFIDDLE—— http://jsfiddle.net/g9YRb ​​/3/

JS

var INTERVAL = 1000;
var myprefix = "news";
var maxnewsnumber = document.getElementsByTagName("div").length;


var myindex = 0;

function alternatenews(idx)
{
   idx++;

   myindex = idx;
    function retrigger()
    {
        setTimeout(function()
       {
           alternatenews(myindex);
       },INTERVAL);
    }
   if(myindex > maxnewsnumber)
   {
      document.getElementById(myprefix + parseInt(myindex-1)).style.visibility = "hidden";
       myindex = 0;
       alternatenews(myindex);

   }
    else if(myindex == 1)
   {
       document.getElementById(myprefix + myindex).style.visibility = "visible";
       retrigger();
   }
    else
    {
        document.getElementById(myprefix + parseInt(myindex-1) ).style.visibility = "hidden";
       document.getElementById(myprefix + myindex).style.visibility = "visible";
        retrigger();
    }

}
alternatenews(myindex);

HTML

<div id="news1">Here are some news! 1111</div>
<div id="news2">Here are some news! 2222</div>
<div id="news3">Here are some news! 3333</div>
<div id="news4">Here are some news! 4444</div>
<div id="news5">Here are some news! 5555</div>

CSS

div
{
   visibility: hidden
}
于 2013-08-14T04:10:51.503 回答