Simple Slideshow with fading transitions

Description

This is a simple JQuery Slideshow that only requires JQuery Library

This is a simple JQuery Slideshow that only requires JQuery Library

HTML Source Code

                        
                          <div class="slideshow">
<div class="fadein">

<img src="http://allinonegeek.com/wp-content/uploads/2011/12/ifeanyi.png">
<img src="http://allinonegeek.com/wp-content/uploads/2011/12/ifeanyi.png">

</div>
</div>

CSS Source Code

                        
                          /*Slideshow Start*/
.slideshow {
    height: 280px;
    width: 1000px;
}

.fadein {
    border: medium none;
    height: 280px;
    overflow: hidden;
    position: absolute;
    visibility: visible;
    width: 1000px;
    z-index: 2;
}

.fadein img {
left:0;
position:absolute;
top:0;
width:100%;
}
/*Slideshow Ends*/

JavaScript Code

                        
                          <!--JQuery Slideshow Start-->
<script type="text/javascript">		
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      5000);
});
</script>
<!--JQuery Slideshow End-->


Post Categories

Tags