How to create a rotating thumbnails functionality in jQuery?
<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>
