title: jQuery: Image fader with on click opacity change
body: <p>I'm looking to have a banner to rotate through the images (which works) however I can't work out how to get it to go to a certain image if a below link is clicked... once the image shows i want it to continue to carry on rotating. I'm using Opacity to make the images fade and it works well so I just need to work out how to get an <code>.click</code> function to work somehow I think. Perhaps using index numbers? </p>
  
  <p>This is the code I have:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  #images{
      position:relative;
      display:block;
      height: 450px;
  }
  #images img{
      position:absolute;
  }
  img.current{
      z-index:100;
  
  }
  img.next{
      z-index:99;
  }
  &lt;/style&gt;
  
  &lt;script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js" &gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  
  $("document").ready( // Start JQ
      function(){
      var timing=3000 ;
      var currentImg ;
      var nextImg ;
      setInterval(rotateImages,timing);
  
      function rotateImages(){
  
          currentImg=$(".current"); 
          nextImg=currentImg.next() ;
  
          if(nextImg.length==0){ 
              nextImg=$("#images img:first") ; 
          } 
  
          currentImg.removeClass("current").addClass("next") ; 
  
          nextImg.addClass("current").css({opacity:0})
              .animate({opacity:1},timing/2,function(){
                  currentImg.removeClass("next") ;
              }); 
          } 
  
  }); // End JQ
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body &gt;
      &lt;div id="images"&gt;
          &lt;img src="images/jpg/image1.jpg" alt="image1" class="current"/&gt;
          &lt;img src="images/jpg/image2.jpg" alt="image2"  /&gt;
          &lt;img src="images/jpg/image3.jpg" alt="image3" /&gt;
          &lt;img src="images/jpg/image4.jpg" alt="image4" /&gt;
      &lt;/div&gt;
      &lt;div class="click"&gt;
          &lt;a id="1"&gt;Image 1&lt;/a&gt;
          &lt;a id="2"&gt;Image 2&lt;/a&gt;
          &lt;a id="3"&gt;Image 3&lt;/a&gt;
          &lt;a id="4"&gt;Image 4&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>