jquery image slider?

We have been struggling over the last few days to create an image slider.

Basically, all we want is a list of images, for example:

<ul id="images">
<li id="1">http://www.site.com/image1.jpg</li>
<li id="2">http://www.site.com/image2.jpg</li>
<li id="3">http://www.site.com/image3.jpg</li>
<li id="4">http://www.site.com/image4.jpg</li>
<li id="5">http://www.site.com/image5.jpg</li>
</ul>

<div id="imageshow"> photo X of TOTAL </div>

<a id="prev">previous</a>
<a id="next">next</a>

So basically the contents of the UL are an array of the images, the imageshow div will be the content area where the currently selected image will show and the prev and next links scroll through the images.

We want only one image to be selected at a time, and the image can be changed with the prev and next links.

We have found scripts similar to this on the internet, but they come with other features which we do not need and they just bog down the page. We also need this script to work more than once on a page, as this page will contain 2, 3, 4 or even more of this feature, so this image scroller will need to work for each one, if you get what I mean.

How can we go about doing this? So we can emulate something which looks开发者_StackOverflow like the image below:

http://i53.tinypic.com/21b18pe.jpg

Thanks :)

---

Check out: http://www.no-margin-for-errors.com/projects/prettyGallery/

---

what about something like this (untested):

<script>
var imageArray=Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg");
var spot=0;
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;

function nextpic(){
spot++;
if((spot+1)==imageArray.length){spot=0;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;
}

function prepic(){
spot--;
if((spot<0){spot=imageArray.length;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length";
}
</script>
<div id="imageshow"></div>

<a id="prev" onclick="prepic()">previous</a>
<a id="next" onclick="nextpic()">next</a>