(function () { var imgs = $('#your_div img'), index = 0, interval, interval_function = function () { imgs.eq(index).hide(); index = (index + 1) % imgs.length; imgs.eq(index).show(); }; imgs.eq(0).show(); interval = setInterval(interval_function, 5000); $('#your_div').hover(function () { clearInterval(interval); }, function () { interval = setInterval(interval_function, 5000); }); }());
Example: http://jsfiddle.net/Zq7KB/3/
I again used the old code that I wrote to the question the other day, but I thought it was not so important. The trick is to keep your interval in a variable that you save in the background. Then, when you hover over the container, clear the interval. When you exit the container, reset the interval. To better understand how this works, change those 5000 to 1000 so that it passes the test faster.
Hope this helps.
source share