title: How to make images change automatically
body: <p>I am new to javascript and I am trying to do a featured content slider something like the top banner in this website <a href="http://www.homeplus.co.kr" rel="nofollow">http://www.homeplus.co.kr</a></p>
  
  <p>As you can see, the top big banner changes automatically &amp; also will change when user hovers over one of the list at the right.</p>
  
  <p>Right now I am able to do the hovering part, but I am still stuck at the automatic changing content part.</p>
  
  <p>Here's a sample jsfiddle: <a href="http://jsfiddle.net/StormSdq/5tWPy/2/" rel="nofollow">http://jsfiddle.net/StormSdq/5tWPy/2/</a></p>
  
  <pre><code>&lt;div class="pi"&gt;a&lt;/div&gt;
  &lt;div class="pi"&gt;b&lt;/div&gt;
  &lt;div class="pi"&gt;c&lt;/div&gt;
  &lt;div class="pi"&gt;d&lt;/div&gt;
  &lt;div class="c1"&gt;I DREAM&lt;/div&gt;
  &lt;div class="c1"&gt;OF LLAMAS&lt;/div&gt;
  &lt;div class="c1"&gt;JUMPING AROUND&lt;/div&gt;
  &lt;div class="c1"&gt;EATING BUSHES&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.pi {
      font-size:12px;
      color:#000;
      font-weight:700;
      width:30px;
      height:25px;
      margin-right:10px;
      background:transparent;
      border-bottom:solid 1px black;
  }
  .c1 {
      border:1px solid blue;
      background:lightskyblue;
      width:200px;
      height:200px;
      float:right;
      margin-right:430px;
      margin-top:-100px;
      color:red;
      font-size:25px;
      text-align:center;
      display:none;
  }
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>div = document.getElementsByClassName('c1');
  div[0].style.display = 'block'
  B = document.getElementsByClassName('pi');
  B[0].onmouseover = function () {
      blip(0);
  };
  B[1].onmouseover = function () {
      blip(1);
  };
  B[2].onmouseover = function () {
      blip(2);
  };
  B[3].onmouseover = function () {
      blip(3);
  };
  
  function blip(y) {
      div = document.getElementsByClassName('c1');
      for (x = 0; x &lt; (div.length); x++) {
          div[x].style.display = 'none';
      }
      div[y].style.display = 'block';
  }
  </code></pre>
  
  <p>Any help will be greatly appreciated</p>