title: How to create a rotating thumbnails functionality in jQuery?
body: <p>Basically I need the thumbnails to rotate every time the user hovers over an image. Here is my failed attempt:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function() {
  
         $('img').hover(function() {
  
              theImage = $(this).attr('id');
              otherImages = $(this).attr('class').split('@');
              rotateThumbs(otherImages, theImage);
  
         }, function() {
             //
         });
  
      });
  
      function rotateThumbs(otherImages, theImage) {
  
          for (i=0; i &lt; otherImages.length; i++) {
              setInterval($('#'+theImage).attr('src', otherImages[i]), 1000);
          }
  
      }
  &lt;/script&gt;
  
  &lt;img id="myImage" src="http://www.google.com/images/logos/ps_logo2.png" class="http://www.google.com/images/logos/ps_logo2.png@http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png@http://dogandcat.com/images/cat2.jpg" width="174" height="130"  /&gt;
  </code></pre>
  
  <p>Does anyone know how this may be accomplished?</p>