HTML

<div class="slideshow">
<ul class="buttons">
<li class="active" id="button1"><a href="#" title="website named desire">1</a></li>
<li id="button2"><a href="#" title="">2</a></li>
<li id="button3"><a href="#" title="oomph">3</a></li>

</ul>
<ul class="slides">
<li style="visibility:visible" class="slide" id="image1">
<a href="http://www.awebsitenameddesire.com"><img alt="website named desire" src="../images/home_masthead_awnd.jpg" /></a></li>
<li class="slide" id="image2">
<a href="http://2009.visitmix.com"><img alt="" src="../images/home_masthead_mix09.jpg" /></a></li>
<li class="slide" id="image3">
<a href="http://visitmix.com/lab/oomph"><img alt="oomph" src="../images/home_masthead_oomph.jpg" /></a></li>

</ul>
</div>

CSS

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}

/* begin: slideshow */
.slideshow {
position:relative;
padding:0;
margin:0;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:260px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:100;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:30px;
height:30px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
/* end: slideshow */

jQuery