Help with jquery slide show navigation

I am trying to implement an inline block navigation which can have numbers and a pause button but I don’t know how,
here is the code;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”>
<html xmlns=“”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Easy Jquery Auto Slideshow Image Rotator</title>
<style type=“text/css”>
body {
color: #4E3D4E;
font: normal 0.6em sans-serif, Arial;
background-color: #EDEDED;
width: 100%;
h1 {
padding-left: 55px;
font:bold 14px/1.5em “Trebuchet MS”, Trebuchet, Arial, Verdana, Sans-serif;
a {
outline: none;

<style type=“text/css”>
/* rotator in-page placement /
div#rotator {
margin-left: 15px;
rotator css /
div#rotator ul li {
list-style: none;
rotator image style */
div#rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
div#rotator ul {

<script type=“text/javascript” src=“”></script>

<script type=“text/javascript”>

function theRotator() {
//Set the opacity of all images to 0
$(‘div#rotator ul li’).css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('div#rotator ul li:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds


function rotate() {
//Get the first image
var current = ($(‘div#rotator ul’)? $(‘div#rotator ul’) : $(‘div#rotator ul li:first’));

//Get next image, when it reaches the end, rotate it back to the first image
var next = (( ? (('show')) ? $('div#rotator ul li:first') : $('div#rotator ul li:first'));	

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)


$(document).ready(function() {
//Load the slideshow


<h1>Jquery Auto Image Rotator</h1>

<div id=“rotator”>
<li class=“show”><a href=“#link1”><img src=“images/image-1.jpg” width=“500” height=“313” alt=“pic1” /></a></li>
<li><a href=“#link2”><img src=“images/image-2.jpg” width=“500” height=“313” alt=“pic2” /></a></li>
<li><a href=“#link3”><img src=“images/image-3.jpg” width=“500” height=“313” alt=“pic3” /></a></li>
<li><a href=“#link4”><img src=“images/image-4.jpg” width=“500” height=“313” alt=“pic4” /></a></li>


This may not be helpful, since your obviously trying to write your own, but have you considered using a pre-written jQuery plugin, such as jQuery Cycle? It’s really easy to implement, and you could avoid “reinventing the wheel” as they say. Then again, it may not do everything you want - just thought I’d mention it.