Demostración de diapositivas
//*************** CONFIGURACIÓN ***************//
//***** Ruta de las fotografías *****//
var _RUTA_FOTOS = "slide_fotos/"; // guarda la ruta (relativa) donde se encuentran las fotografías.
// Por defecto, slide_fotos
//***** Rutas de las imágenes del slideshow y de las css *****//
var _SLIDE_IMG = "slide_img/";
var _SLIDE_CSS = "slide_css/";
//***** Nombre del campo imagen a utilizar, por defecto *****//
var _SLIDE_NOMBRE_IMG = "_SLIDE_NOMBRE_IMG";
//***** Modos del slide *****//
var _MODO_SLIDE = "normal"; // normal - Solo anterior y siguiente
// full_mode - Muestra todos los controles
//***** velocidad del slide *****//
var _VELOCIDAD_SLIDE = 1000; // en milisegundos
//******************* MOTOR *******************//
// constructor
function Slideshow(nombre_objeto)
{
if(nombre_objeto == null)
{
this.nombre_objeto = "mySlide";
}else{
this.nombre_objeto = nombre_objeto;
}
this.lista_imagenes = new Array(); // lista de imágenes a usar
this.posicion = 0; // posición de inicio
// métodos
this.agregar_imagen = agregar_imagen;
this.en_marcha = false;
this.siguiente = siguiente;
this.anterior = anterior;
this.primera = primera;
this.ultima = ultima;
this.auto = auto;
this.stop = stop;
this.crear_slide = crear_slide;
}
// agregar imagen
// se pueden agragar varias imágenes a la vez, separadas por comas (,)
function agregar_imagen(lista)
{
for(i = this.lista_imagenes.length; i < agregar_imagen.arguments.length; i++)
{
this.lista_imagenes[i] = agregar_imagen.arguments[i];
}
}
// anterior y siguiente
function siguiente()
{
this.posicion++;
if(this.posicion >= this.lista_imagenes.length)
{
this.posicion = 0;
}
document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
}
function anterior()
{
this.posicion--;
if(this.posicion < 0)
{
this.posicion = this.lista_imagenes.length - 1;
}
document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
}
// primera y última
function primera()
{
this.posicion = 0;
document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
}
function ultima()
{
this.posicion = this.lista_imagenes.length - 1;
document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
}
// stop y auto
function auto()
{
this.en_marcha = true;
if( this.posicion >= this.lista_imagenes.length-1 )
{
this.posicion = 0;
}else{
this.posicion++;
}
document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
slide_id = setTimeout(this.nombre_objeto + ".auto()", _VELOCIDAD_SLIDE);
}
function stop()
{
if( this.en_marcha )
clearTimeout(slide_id);
}
// crear slide
// crea el slide con todos sus comportamientos
function crear_slide()
{
salida = "";
salida = "";
salida += "";
salida += "
{
salida += " colspan='2'>";
}else{
salida += " colspan='6'>";
}
if(this.lista_imagenes.length == 0)
{
salida += ":: Imágenes todavía sin definir ::";
}else{
salida += "";
}
salida += "";
if(this.lista_imagenes.length != 0)
{
// si hay imágenes definidas
salida += " ";
// botón de primera
if(_MODO_SLIDE == "full_mode" )
{
salida += "";
salida += ":: primera ::";
salida +="";
}
// botones de anterior y siguiente
salida += "";
salida += ":: anterior ::";
salida += "";
salida += "";
salida += ":: siguiente ::";
salida += "";
// botón de última
if(_MODO_SLIDE == "full_mode" )
{
salida += "";
salida += ":: última ::";
salida += "";
}
// controles de reproducción automática
if(_MODO_SLIDE == "full_mode" )
{
salida += "";
salida += ":: auto ::";
salida += "";
salida += "";
salida += ":: stop ::";
salida += "";
}
salida += "";
}
salida += "";
document.writeln(salida);
}
/***** END *****/
ejemplo de utilización del slideshow
slideshow.zip( 285 k)