JS: Cambio de Imagenes


******************************

Prologo

******************************

Buscando por la red un cambio de imagenes sencillo y opcional pues quise practicar haciendo uno en javascript. cosa q ayuda mucho por que la pagina ya no se esta refrescando...



=============================

Descripcion

=============================

Imagen:Es la imagen cambiante

Avanzar: Para Avanzar Imagen

Retroceder: Para Retroceder Imagen

PAginas: Se autogenera segun la cantidad de paginas que pongas en la variable

Variables:

     *cant_ima es la cantidad de imagenes que tienes recuerda que las imagenes debes de nombrar en orden númerico... por ejempl: 1.jpg, 2.jpg, 3.jpg...  hasta el ultimo recuerda que el limite es Cant_Ima.

     *tiempo es el tiempo de cambio de imagen ahi puse 10000 q es 10 sec... osea 1 sec es 1000 y lo modificas a la cantidad de tiempo que quieras..



=========================

Defectos:

=========================

NO hay una opcion de pre-carga... si me ayudan a hacerla seria xevere.. xD... por tal motivo es nesesario que las fotos sean ligeras... pero como dije soy novato.. nose.. xD. pero tratare de hacerlo.



=========================

codigo:

=========================

-----Head---

<script language="JavaScript">

var cant_ima=117;

var tiempo=10000;

var tempo5;

function c(n)

{

if(n>cant_ima){n=1;}

document.images["ima"].src = ""+ n +".jpg";

if (tempo5){window.clearInterval(tempo5);}

//paginacion

pgan=n - 1;

pgsi=n + 1;

document.getElementById('pagan').innerHTML='<a href="#" onclick="c('+ pgan +');">Anterior</a>';

document.getElementById('pagsi').innerHTML='<a href="#" onclick="c('+ pgsi +');">Siguiente</a>';

document.getElementById('num_pag').innerHTML='Foto: -'+ n +'-';

//*

tempo5 = setInterval("c("+ pgsi +")",tiempo);

}



</script>



-----Despues del Body-----

<img src="1.jpg" name="ima"/>

<table border="0">

      <tr>

        <td style="text-align:right"><div id="pagan"><a href="#" onclick='c(2);'>Anterior</a></div></td>

        <td><div id="num_pag"></div></td>

        <td align="left"><div id="pagsi"><a href="#" onclick='c(2);'>Siguiente</a></div></td>

      </tr>

      <tr>

        <td colspan="3" align="center" valign="top" style="text-align:right"><script language="javascript">

    for (x = 1; x <= cant_ima; x++)

    {

     document.write('<a href="#" onclick="c(' + x +');">' + x +'</a> ');

    }

          </script></td>

        </tr>

    </table>