0

サイトにアラートやニュースを表示したいセクションがあります。最初のニュースを x 秒間表示してから、2 番目のニュースに x 秒間移動し、最初のニュースをもう表示しないようにしたい。次に、3 番目のニュースに移動して 2 番目のニュースを表示しない..など。javascript から始めたばかりで、私が作っていたコードは 1 回の実行でしか機能せず、停止しました。これを無限に、または非常に高い数で実行して、ユーザーがページにいる間にニュース アラートを確認できるようにしたいと考えています。次から次へと。

私が得ることができる助けに感謝します。約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

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 に答える