[vwphillips]

$(document).ready(function() {
 Next.lgth=8;
 Next.index=0;
 $("#nxt").click(function() {
  Next(1);
 });
 $("#bak").click(function() {
  Next(-1);
 });
 $("#cf7_controls").on('click', 'span', function() {
 $("#cf7 img").removeClass("opaque");
 Next.index = $(this).index();
 $("#cf7 img").eq(Next.index).addClass("opaque");
 $("#cf7_controls span").removeClass("selected");
 $("#cf7_controls span").eq(Next.index).addClass("selected");
});
});

function Next(ud){
 ud=Next.index+ud;
 ud=ud<0?Next.lgth:ud>Next.lgth?0:ud;
 $("#cf7 img").removeClass("opaque");
 $("#cf7 img").eq(ud).addClass("opaque");
 $("#cf7_controls span").removeClass("selected");
 $("#cf7_controls span").eq(ud).addClass("selected");
 Next.index=ud;
}

  <p id="cf7_controls">
<input id="bak" type="button" name="" value="Back" />
    <span class="selected">01</span>
    <span>02</span>
    <span>03</span>
    <span>04 </span>
    <span>05 </span>
    <span>06 </span>
    <span>07 </span>
    <span>08 </span>
    <span>09 </span>
<input id="nxt" type="button" name="" value="Next" />  </p>
    </p>
</div>