Question

I have an image slideshow that works, but I need to make it so that when you slide over with your mouse, the slideshow stops at the particular image and then when you release, starts the slideshow again.. Here is my function:

$(function(){
$(this).mouseover(function(){
    $(this).toggle();
});
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein1 :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein1');}, 
  3000);
  });

Could someone please help? It’s really annoying me now.

Answer 1

You need to change your slideshow function to keep better track of the images, something like this should work :

$(function(){
    var timer, elm=0, images = $('img', '.fadein1');
    images.not(':first').hide().end().on({
         mouseenter: function() {
             clearInterval(timer);
         },
         mouseleave: function() {
             timer = setInterval(slider, 3000);
         }
   });

   timer = setInterval(slider, 3000);

   function slider() {
     var image = images.eq(elm);
     image.fadeOut();
     elm = elm!=images.length-1 ? image.next('img').index() : 0;
     images.eq(elm).fadeIn();
   }
 });​

FIDDLE