jQuery SlideShow FeadIn, FadeOut

There are many-many effective slideshow functions are available on net, but I have also seen that many websites have simple image fade-in, fade-out effect for Header Banner Area, Here I will demonstrate to create a common function to apply this effect using jQuery with fadeIn(), fadeOut() functions.

It will take 3 steps to do it.

Step 1: Create HTML

 <ul class="flds">  
 <ul class="myBanner">  
 <li><img alt="" src="http://www.google.com/logos/2012/republicday12-hp.jpg" /></li>  
 <li><img alt="" src="https://www.google.co.in/logos/2012/juan_gris-2012-hp.jpg" /></li>  
 </ul>  
 </ul>  

Here we have two image in un-order list, it will two image one by one, Now we will apply absolute position to each LI usign CSS.

Step 2: Apply CSS to show in one place

 .myBanner{width:400px;height:144px;position:relative;}  
 .myBanner li{position:absolute;display:none;}  

You can see that here we have .myBanner class, I applied Width, Height and Position to Relative;
and its sub CSS LI has position:absolute to create all image in same position and display:none to hide all image

Now all image will be hide, but we need to display first image when web site load to show it as a default image, So it required to apply display:block style in first LI.

 <li style="display: block;"></li>  

or you can do it directly in LI tag or using CSS.

 .myBanner li:first-child{display:block!important;}  

finally it is required a jQuery function and a Timer to apply Hide/Show effect.

Step 3: Create jQuery Function

 <script type="text/script" language="javascript">  
 $(document).ready(function () {  
     setInterval("slideShow('.myBanner')", 5000);  
 });  
     function slideShow(ssObj) {  
       var obj = ssObj + " li";  
       var crrObj = $(obj + ':visible');  
       var nextObj = $(obj + ':visible').next();  
       if ($(obj + ':last').is(':visible')) {  
         nextObj = $(obj + ':first');  
       }  
       crrObj.fadeOut(2000);  
       nextObj.fadeIn(2000);   
     }  
 </script>  

cool! It is now ready to fadeIn, fadeOut by every 5 seconds.

Don't forget to import jQuery.js file.