How to create a rotating thumbnails functionality in jQuery?

Basically I need the thumbnails to rotate every time the user hovers over an image. Here is my failed attempt:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(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 < otherImages.length; i++) {
            setInterval($('#'+theImage).attr('src', otherImages[i]), 1000);
        }

    }
</script>

<img id="myImage" src="http://www.google.com/images/logos/ps_logo2.png" class="http://www.google.co开发者_Python百科m/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"  />

Does anyone know how this may be accomplished?

---

Some issues here.

1. setInterval requires a function reference as it's first argument, but you are executing code that returns a jQuery object.
2. setInterval executes the first function repeatedly at the specified interval. Is that what you are trying to do? Swap images every second?
3. Depending on how you correct the first issue, you could run into an issue where i is otherImages.length and thus the src is set to undefined.
4. Assuming you worked around issue 3, you will have the problem that the image swaps will happen imperceptibly fast and it will appear as though the last image is always displayed.

Instead, don't use a loop. Increment a counter each time a new image is displayed. Try this:

function rotateThumbs(otherImages, theImage) {
    var i = 0;
    var interval = setInterval(function() {
        $('#'+theImage).attr('src', otherImages[i++]);
        if (i >= otherImages.length) {
            clearInterval(interval);
        }
    }, 1000);
}

---

I've implemented a fully-functional example here. This addresses some of the issues that @gilly3 notes, but uses closures instead of an incrementing counter to keep track of the current image:

$(function() {

    $('img').hover(function() {
        // declaring these variables here will preserve
        // the references in the function called by setInterval
        var $img = $(this),
           imageList = $img.attr('class').split('@'),
           intervalId;
        // start the cycle
        intervalId = window.setInterval(function() {
            var next = imageList.pop();
            if (next) {
                $img.attr('src', next);
            } else {
                // stop the cycle
                intervalId = window.clearInterval(intervalId);
            }
        }, 1000);
    }, function() {});

});

As you can see, using a closure is much easier when you declare the function passed to setInterval inline, rather than as a separate, named function. You could still have a rotateThumbs function if you wanted, but you might need to do some more work to ensure that the variables were being passed properly.

Edit: I made an updated version that continues to cycle as long as the mouse is hovering.

---

I have adjusted the answer for Sam, taking pre-loading the image into account, so that you won't have a possible deplay at the first rotation.

function rotateThumbs(otherImages, theImage) {
        if(!$('#'+theImage).data('setup')){
            $('#'+theImage).data('setup', true); // do not double pre-loading images
            var $body = $('body');
            for(var j = 0; j < otherImages.length; j++){
                $body.append($('<img/>').attr('src', otherImages[j])
                .css('display', 'none'));
            }
        }
        var i= 0;
        setInterval(function(){
            $('#'+theImage).attr('src', otherImages[i++]);
            if(i >= otherImages.length){i = 0}
        }, 1000);
}