counterxxx

by lovromar

HTML

<div id="timer"></div>
      <h2>Example of using setInterval to trigger display of Div</h2>
      <p>The first div will display after 10 seconds...</p>
      <div id='container'>
      <div id='div1' class='display' style="background-color: red;"> 
         div1
      </div>
        
        <div id='xxa2' class='display' style="background-color: yellow;"> 
         div2xx
      </div>
        
        
      <div id='div2' class='display' style="background-color: green;"> 
         div2
      </div>
      <div id='div3' class='display' style="background-color: blue;"> 
         div3
      </div>
      <div>

CSS

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
         .display { width:300px; height:200px; border: 2px solid #000; }
         .js .display { display:none; }

JavaScript

$(function () {

    var counter = 0,
        divs = $('#div1, #div2, #div3');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
      
//$('#timer').html(counter);
    }
  // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); 
      
    }, 10 * 300); 
      
}
 );