Rotating Banner / Image Sequence

This sample was entirely created using the Glimmer image sequence wizard. Whether it be for advertising, mastheads for your website, or, perhaps, an image gallery for your photos, Glimmer can help. Just tell it which photos, and a little information on how you’d like them to act, and Glimmer does the rest.

  • website named desire
  • oomph

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