Slide: Javascript Slide

       <script type="text/javascript">
          function slideSwitch() {
             var $active = $('#slideshow IMG.active');     
             if ( $active.length == 0 ) $active = $('#slideshow IMG:last');     
                // use this to pull the images in the order they appear in the markup     
                var $next =  $active.next().length ? $active.next()         : $('#slideshow IMG:first');     
                // uncomment the 3 lines below to pull the images in random order
                // var $sibs  = $active.siblings();   
                // var rndNum = Math.floor(Math.random() * $sibs.length );     
                // var $next  = $( $sibs[ rndNum ] );     
                $active.addClass('last-active');     
                $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() {            
                   $active.removeClass('active last-active');      
                }); 
         }  

         $(function() {     
             setInterval( "slideSwitch()", 2000 ); 
         });

    </script>

   <style>
       /* set the width and height to match your images **/
       #slideshow {     position:relative;     width:250px;     height:100px;  }
       #slideshow IMG {     position:absolute;     top:0;     left:0;     z-index:8;     opacity:0.0; } 
       #slideshow IMG.active {     z-index:10;     opacity:1.0; } 
       #slideshow IMG.last-active {     z-index:9; } 
    </style>

    <div id="slideshow">
             <img src="images/banner1.png" class= "active" />
             <img src="images/Banner2.png" border="0"/>
             <img src="images/Banner3.png" border="0"/>
             <img src="images/Banner4.png" border="0" />
    </div>