title: Javascript / HTML banner not working
body: <p>I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).</p>
  
  <p>I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.</p>
  
  <p>Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <code>&lt;a href=.......&gt;</code> in the <code>HTML</code> code?</p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;script type="text/javascript" src:"jquery.js"&gt;&lt;/script&gt;
  &lt;div id="banner"&gt;
      &lt;img src="images/banner1.jpg" class="active" /&gt;
      &lt;img src="images/banner4.jpg" /&gt;
      &lt;img src="images/banner2.jpg" /&gt;
      &lt;img src="images/banner3.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>javascript/jQuery</h2>
  
  <pre><code>    $(document).ready(function () {
      setInterval(function () {
          //Get current active image
          var active = $('#banner .active');
  
          // If there is another image(object) left then make that image next
          // If not, go back to the first image of the banner div
          if (active.next().length &gt; 0) var next = active.next();
          else var next = $('#banner img:first');
  
          //Get the next image ready by modifying the z-index
          next.css('z-index', '2');
  
          //Fade out the active image, then
          active.fadeOut(1000, function () {
  
          });
          //Move the active image to the back of the pile, show it and             remove     the active class
          active.css('z-index', '1').show().removeClass('active');
          //Make the next image the active one    
          next.css('z-index', '3').addClass('active');
      });
  
  }, 3000);
  }); 
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#banner {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      height: 350px;
      width: 950px;
      margin-top: 10px;
  }
  #banner img {
      position:absolute;
      z-index:1;
  }
  #banner img.active {
      z-index:3;
  }
  </code></pre>