A nice way to fade in and out of images

include
<script type=”text/javascript” src=”js/jquery-1.2.1.min.js”></script>
<script type=”text/javascript” src=”js/common.js”></script>
<script type=”text/javascript” src=”js/jquery.slideshow.js”></script>

javascript for common.js
    // Animate homepage banner…
var obj = $(‘#slideshow’);
// check object exists…
if (obj.length>0) {
// remove the hideslide class as javascript is enabled…
$(‘#slideshow img.hideslide’).each(function(i){
$(this).removeClass(“hideslide”);
});

$(obj).slideshow({
timeout: 5000,
type: ’sequence’
});
}

 CSS

#slideshow{
margin:0;
padding:0;
height:161px;
}

#slideshow img {
position: relative;
left: 0;
top: 0;
width: 900px;
height: 161px;
}

XHTML 

<div id=”slideshow”>
<img src=”images.jpg” alt=”slide 1″ />
<img src=”images.jpg” alt=”slide 2″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 3″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 4″ width=”900″ height=”161″ class=”hideslide” />
</div>

Really nice lightweight jQuery ’sliding’ menu.

http://www.gmarwaha.com/blog/?p=7