Originariamente inviato da Gumble
penso che bisogni
Ecco un altro fan di Lapo.

Allora, una soluzione potrebbe essere la seguente.

codice:
XHTML

<div id="slideshow">
   <ul id="elenco_immagini">[*]
         [img]colosseo.jpg[/img]
      [*]
         [img]duomo.jpg[/img]
      
      [/list]
</div>


CSS

#elenco_immagini,
#elenco_immagini li
{
   padding:0; margin:0;
   list-style-type:none;
}
#slideshow a
{
   padding:0.3em; margin:1em;
   border:1px solid #CCC;
   color:#333;
   text-decoration:underline;
}
#slideshow a:hover
{
   color:#CCC; background-color:#333;
   cursor:pointer;
}
li.immagine_nascosta
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}


Javascript

window.onload = function()
{
   var slideshow = document.getElementById('slideshow')
   var elenco_immagini = document.getElementById('elenco_immagini')
   var immagini = elenco_immagini.getElementsByTagName('li')
   
   var totale_immagini = immagini.length
   var immagine_corrente = 0

   function nascondi_immagini()
   {
      for (var i = 0; i < totale_immagini; i++)
      {
         immagini.item(i).className = 'immagine_nascosta'
      }
   }
   function visualizza_immagine(indice)
   {
      nascondi_immagini()
      immagini.item(indice).className = ''
   }

   function avanti()
   {
      if ( immagine_corrente < totale_immagini - 1 )
      {
         immagine_corrente++
      }
      else
      {
         immagine_corrente = 0
      }
      visualizza_immagine(immagine_corrente)
   }
   function indietro()
   {
      if ( immagine_corrente > 0 )
      {
         immagine_corrente--
      }
      else
      {
         immagine_corrente = totale_immagini - 1
      }
      visualizza_immagine(immagine_corrente)
   }

   // Creiamo i pulsanti 'indietro' e 'avanti'
      var pulsante_indietro = document.createElement('a')
      var pulsante_indietro_testo = document.createTextNode('indietro')
      pulsante_indietro.appendChild(pulsante_indietro_testo)
      slideshow.appendChild(pulsante_indietro)
      pulsante_indietro.onclick = function()
      {
         indietro()
      }
      
      var pulsante_avanti = document.createElement('a')
      var pulsante_avanti_testo = document.createTextNode('avanti')
      pulsante_avanti.appendChild(pulsante_avanti_testo)
      slideshow.appendChild(pulsante_avanti)
      pulsante_avanti.onclick = function()
      {
         avanti()
      }

   // Inizializza
   visualizza_immagine(immagine_corrente)
}
Lasciami un secondo per pensare a come inserire meglio i due pulsanti nel mark-up.