Probleme avec ma galerie photo

bonjour a tous
qulequ'un pourait m'aider à mettre un bouton suivant et precedent sur mon script.
pour que lorsque je clique sur le bouton suivant je passe directement sur l'image suivante et sur precedent je revien sur l'image presedente.
merci d'avance

<div id="galerie">

<table width="390" bgcolor="#002E5B" height="25">
<tr>
<td>
<div align="center" class="Style11">Album</div></td>
</tr>
</table>

<ul id="galerie_mini">
<li>
<a href="images/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a> </li>
<li>
<a href="images/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a> </li>
<li>
<a href="images/photo3.jpg" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a> </li>
<li>
<a href="images/photo4.jpg" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a> </li>
<li>
<a href="images/photo5.jpg" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a> </li>
<li>
<a href="images/photo6.jpg" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a> </li>
<li>
<a href="images/photo7.jpg" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a> </li>
<li>
<a href="images/photo8.jpg" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a> </li>
<li>
<a href="images/photo9.jpg" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a> </li>

</ul>

<dl id="photo">
<dt>Album photo</dt>
<dd><img src="images/photo1.jpg" alt="Photo 1 en taille normale" width="388" height="295" id="big_pict" /></dd>

</dl>




</div>

///mon code javascript////

function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens.onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}


///le css//
#galerie
{
width:390px;
height:490px;
margin-top:2px;
margin-left:4px;
float:left;
margin-right:1px;
background-color:#FFF0FF;
border-radius:20px 20px 20px 20px;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}

ul#galerie_mini li
{
float: left ;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

dl#photo
{
clear: both ;
margin: 0 auto ;
}

dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

dl#photo dd
{
margin: 0 ;
}

dl#photo img
{
border: 1px solid #dcb ;
}