jQuery code to change image multiple times won't work!
<p>I'm extremely new to web design in general, let alone jQuery! I'm trying to create a webpage with an image that changes sequentially and then goes back to the beginning and starts the sequence again. I've found some useful code on the Internet but I'm really struggling to make this work. Any pointers would be much appreciated, thanks!</p>

<p>Here is my code:</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
&lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;LINK REL=StyleSheet HREF="BSkyBtest.css" TYPE="text/css" MEDIA=screen&gt;



&lt;script type="text/javascript"&gt;
  function swapImages(){

  var $active = $('#Grid .active');
  var $next = ($('#Grid .active').next().length &gt; 0) ? $('#Grid .active').next() : $('#Grid img:first');

  $active.fadeOut(function(){
  $active.removeClass('active');
  $next.fadeIn().addClass('active');
});
} 

$(document).ready(function(){

// Run swapImages() function every 1 second

setInterval('swapImages()', 1000);

}
&lt;/script&gt;
&lt;/head&gt;


&lt;body&gt;

&lt;div id="Grid"&gt;
  &lt;img src="grid.png" class="active" /&gt;
  &lt;img src="yellow.png" /&gt;
  &lt;img src="green.png" /&gt;
&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

p{
 color:#ffffff;
}

#Grid{
  position:relative;
  width:400px; /* image width */
  height:300px; /* image height */
}
#Grid img{
  display:none;
  position:absolute;
  top:0;
  left:0;
}
#Grid img.active{
  display:block;
}
</code></pre>
