如何在鼠标悬停时旋转缩略图？

Question

Looking for JS library or code snippet (jQuery is allowed) that can rotate images after user moves cursor to image. For example, this functionality is implemented for video thumbnails in Dailymotion.com website.

I am going to use this code for webpage with 20-40 thumbnails (application screenshots) and each item contains about 10 additional images that should start rotation when user moves cursor to thumbnail and stop when cursor leaves.

I don't want to load all of this images in html code, it's several hundreds requests that are not necessary each time user enters page.

Unfortunately, all code that I found use static image linking from html code.

I tried to find answer in search engines, but can't find correct formulation. I tried "image rotator JS", "change images on hover", "auto rotate images" and some other variations, may be this task simply has another name that I missed.

Answer 1

Try using the Cycle Plugin .

If you have a class for the thumbs called .thumb , then you can control it with the .cycle('pause') and .cycle('resume') commands.

$('.thumb').cycle({ ... }).cycle('pause'); // setup, choose your own settings, then pause

$('.thumb').hover(function() {
  $(this).cycle('resume');
}, function() {
  $(this).cycle('pause');
});

Answer 2

Sounds like your looking for something that apple calls 'Scrubbing', like they use in iPhoto.

Some quick searches turned up some libraries todo just this:

• MooTools - http://www.tangerinesmash.com/2008/mootools-iphoto-image-scrubber/
• Jquery - http://www.stucktogetherwithtape.com/code/scrub
• Google Search - http://www.google.com/search?q=javascript+iphoto+image+scrubbing