Skip to content Skip to sidebar Skip to footer
Home / Javascript / Slideshow

When Mouse Over Image Slide Is Start As Gif Image

Post a Comment
I have 5 images in a same folder. 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg I will be show only one image on my webpage. example when visit

Solution 1:

You can use jQuery's hover event and pass in the onenter and onout methods. On enter you can call and setup an interval to increment the number of your image, and on out you want to stop it by clearing your interval.

<!DOCTYPE html>
<html>
  <head>
    <title>image</title>        
  </head>
  <body>

    <img id="img" src="1.jpg" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      var interval = null;
      function changeImage(){
        var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
        // If you want it to repeat back to 1 after 5
        nextNum = nextNum > 5 ? 1 : nextNum;
        $('#img').attr('src', nextNum+'.jpg');
      }

      $('#img').hover(
        function(){
          // Call change Image every 50ms
          interval = setInterval(changeImage, 50);
          changeImage();
        },
        function(){
          // Stop the call
          interval && clearInterval(interval);
        }
      );
    </script>
  </body>
</html>​​​​​​​​​​​​

Post a Comment for "When Mouse Over Image Slide Is Start As Gif Image"