Learn free online HTML5, javascript, and jquery Tutorials by Examples

Wednesday 21 May 2014

Changing images with setInterval() function using jquery

-------------------------------------------------------------
<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    function swapImages(){
      var $active = $('#Gallery .active');
      var $next = ($('#Gallery .active').next().length > 0) ? $('#Gallery .active').next() : $('#Gallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    });
  </script>

  <style>
    #Gallery{
      position:relative;
      width:400px; /*image width */
      height:300px; /*image height */
    }
    #Gallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #Gallery img.active{
      display:block;
    }
  </style>

  <div id="Gallery">
    <img src="one.jpg" class="active" />
    <img src="two.jpg" />
    <img src="three.jpg" />
  </div>



--------------------------------------------------------------

No comments:

Post a Comment