I really like the cycle plugin because it's really flexible. You can really do a lot with it!
DEMO: http://webbymaid.net/snippets/rotator.html
HTML
<div id="rotator">
<div id="thumbnails">
</div>
<div id="slideshow-pager">
<div class="slide">
<div class="slide-info">
<h1>
Those Snow Globes</h1>
<p>
is all about elephants in their natural environment: the glittery snow globe that I won, but was recalled because it starts house fires when placed in the direct sun.</p>
</div>
<img src="images/rotator-slide-1.jpg" alt="slide one" />
</div>
<div class="slide">
<div class="slide-info">
<h1>
Shenanigans</h1>
<p>
is a funny word, but not nearly as funny as shelay-lee. I don't know how to spell that - I wish I had a stenograph writer and court room reporter skills.</p>
</div>
<img src="images/rotator-slide-2.jpg" alt="slide two" />
</div>
<div class="slide">
<div class="slide-info">
<h1>
Elephant Butts</h1>
<p>
are five times as groovy than the leading brand of animal butt.</p>
</div>
<img src="images/rotator-slide-3.jpg" alt="slide three" />
</div>
</div>
</div>
CSS
<style type="text/css">
#rotator
{
height: 281px;
overflow: hidden; /* contain rotator while jquery and images load */
position: relative;
width: 665px;
}
#thumbnails
{
clear: both;
display: block;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100px;
}
#thumbnails a
{
clear: both;
overflow: hidden;
width: 100px;
}
#thumbnails a img
{
border: 0;
margin-bottom: 1px;
opacity: .4;
filter: alpha(opacity=40);
}
#thumbnails a:hover img, #thumbnails a.activeSlide:hover img
{
opacity: .8;
filter: alpha(opacity=80);
}
#thumbnails a.activeSlide img
{
opacity: 1;
filter: alpha(opacity=100);
}
#slideshow-pager
{
display: block;
margin: 0 0 0 100px;
width: 500px;
}
.slide
{
height: 281px;
overflow: hidden;
position: relative;
width: 500px;
}
.slide img
{
left: 0;
position: absolute;
top: 0;
}
.slide-info
{
background: #fff;
bottom: 0;
color: #000;
display: block;
font: 9pt Arial;
height: 73px!important;
height: 93px;
opacity: .70;
filter: alpha(opacity=70);
left: 0;
padding: 10px;
position: absolute;
width: 500px;
z-index: 5;
}
.slide-info h1
{
font-size: 15pt;
}
</style>
JQUERY
<script type="text/javascript">
$(function() {
$('#slideshow-pager').cycle({
fx: 'fade',
//timeout: 0, //use this feature to stop the rotator from rotating without using the pager
pager: '#thumbnails',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<a href="#"><img src="images/rotator-slide-'+(idx+1)+'.jpg" alt="thumbnail" height="93" width="165" /></a>';
};
});
</script>