Displaying image automatically using jquery

To Display the image dynamically using jquery
 

 <div id="disp_imgs">      <!-- place your image files in img src tag -->
            <img src="#" class="active" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
 </div>

 Styles for the div which display the images

 

            #disp_imgs
            {
                position:relative;
                width:400px; /* Set your image width */
                height:300px; /* Set your image height */
            }
            #disp_imgs img
            {
                display:none;
                position:absolute;
                top:0;
                left:0;
            }
            #disp_imgs img.active
            {
                display:block;
            }

Jquery function to make the images to display dynamically,

 

function swapImages(){
  var $active = $('#disp_imgs .active');
  var $next = ($('#disp_imgs .active').next().length > 0) ? $('#disp_imgs .active').next() : $('#disp_imgs img:first');
  $active.fadeOut(function(){
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}