title: how to stop jquery imageslider on mouse hover
body: <p>this is my website demo : <a href="http://daplonline.in/index5.php" rel="nofollow">http://daplonline.in/index5.php</a></p>
  
  <p>i got this jquery from : <a href="http://designm.ag/tutorials/image-rotator-css-jquery/" rel="nofollow">http://designm.ag/tutorials/image-rotator-css-jquery/</a></p>
  
  <p>i want to stop slider automatic to stop when user Mouse hover on Small thumb image current slide is automatic and user can't read image's advertise </p>
  
  <p>i want to make automatic but when user click or mouse hover on small image slider must stop.</p>
  
  <p>my jquery code is here</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  var intervalId;
  var slidetime = 2500; // milliseconds between automatic transitions
  
  $(document).ready(function() {  
  
    // Comment out this line to disable auto-play
      intervalID = setInterval(cycleImage, slidetime);
  
      $(".main_image .desc").show(); // Show Banner
      $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
  
      // Click and Hover events for thumbnail list
      $(".image_thumb ul li:first").addClass('active'); 
      $(".image_thumb ul li").click(function(){ 
          // Set Variables
          var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
          var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
          var imgDesc = $(this).find('.block').html();    //  Get HTML of block
          var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block    
  
          if ($(this).is(".active")) {  // If it's already active, then...
              return false; // Don't click through
          } else {
              // Animate the Teaser               
              $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                  $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
                  $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
              });
          }
  
          $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
          $(this).addClass('active');  // add class of 'active' on this list only
          return false;
  
      }) .hover(function(){
          $(this).addClass('hover');
          }, function() {
          $(this).removeClass('hover');
      });
  
      // Toggle Teaser
      $("a.collapse").click(function(){
          $(".main_image .block").slideToggle();
          $("a.collapse").toggleClass("show");
      });
  
      // Function to autoplay cycling of images
      // Source: http://stackoverflow.com/a/9259171/477958
      function cycleImage(){
      var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
      var currentImage = $(".image_thumb ul li.active");
  
  
      if(onLastLi){
        var nextImage = $(".image_thumb ul li:first");
      } else {
        var nextImage = $(".image_thumb ul li.active").next();
      }
  
      $(currentImage).removeClass("active");
      $(nextImage).addClass("active");
  
          // Duplicate code for animation
          var imgAlt = $(nextImage).find('img').attr("alt");
          var imgTitle = $(nextImage).find('a').attr("href");
          var imgDesc = $(nextImage).find('.block').html();
          var imgDescHeight = $(".main_image").find('.block').height();
  
          $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
          });
    };
  
  });// Close Function
  &lt;/script&gt;
  </code></pre>