title: Loop images and stop on hover - jQuery
body: <p>Im trying to creat a cycle of images that when you hover over a link, it shows the relevant image index wise, so for example if you hover over the 4th link, the 4th image shows and the cycle stops, when you hover over none of the links or the mouseleaves, the cycle then starts again.</p>
  
  <p>I've made a simple fiddle to try and explain my idea only I cant quite figure it out. Any help is appreciated.</p>
  
  <p><a href="http://jsfiddle.net/Q4ajK/3" rel="nofollow">http://jsfiddle.net/Q4ajK/3</a></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('#vennD li:gt(0)').hide();
  
  intervalId = setInterval(function() {
   $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
  }, 1000);
  
  
  $( '.targ' ).hover(function() {
  
      var tabIndex = $(this).index();
  
      $('#vennD li').hide();
  
  
      $('#vennD li').eq(tabIndex).addClass("show").show();
  
      clearInterval(intervalId);
  
  }, function() {
  
      $('#vennD li').removeClass("show");
  
      intervalId = setInterval(function() {
   $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
  }, 1000);
  
  }); 
  </code></pre>