slide show Demo
<html>
<head>
<title>Demostracin de diapositivas</title>
<script language="javascript">
//*************** CONFIGURACIN ***************//
//***** Ruta de las fotografas *****//
var _RUTA_FOTOS = "slide_fotos/"; // guarda la ruta (relativa) donde se encuentran las fotografas.
// Por defecto, slide_fotos
//***** Rutas de las imgenes 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 imgenes a usar
this.posicion = 0; // posicin de inicio
// mtodos
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 imgenes 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 = "<table border='1' cellspacing='0' cellpadding='10' align='center'>";
salida += "<tr>";
salida += "<td align='center' valign='middle'";
if( _MODO_SLIDE == "normal" )
{
salida += " colspan='2'>";
}else{
salida += " colspan='6'>";
}
if(this.lista_imagenes.length == 0)
{
salida += "<b>:: Imgenes todava sin definir ::</b>";
}else{
salida += "<img border='0'id='"+ this.nombre_imagen +"' src='" + _RUTA_FOTOS + this.lista_imagenes[this.posicion] +"'>";
}
salida += "</td>";
if(this.lista_imagenes.length != 0)
{
// si hay imgenes definidas
salida += "</tr>";
// botn de primera
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align='center'>";
salida += "<a id='primera' href='#' onClick='" + this.nombre_objeto + ".primera(); return false;'>:: primera ::</a>";
salida +="</td>";
}
// botones de anterior y siguiente
salida += "<td align='center'>";
salida += "<a id='anterior' href='#' onClick='" + this.nombre_objeto + ".anterior(); return false;'>:: anterior ::</a>";
salida += "</td>";
salida += "<td align='center'>";
salida += "<a id='siguiente' href='#' onClick='" + this.nombre_objeto + ".siguiente(); return false;'>:: siguiente ::</a>";
salida += "</td>";
// botn de ltima
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align='center'>";
salida += "<a id='ultima' href='#' onClick='" + this.nombre_objeto + ".ultima(); return false;'>:: ltima ::</a>";
salida += "</td>";
}
// controles de reproduccin automtica
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align='center'>";
salida += "<a id='auto' href='#' onClick='" + this.nombre_objeto + ".auto();'>:: auto ::</a>";
salida += "</td>";
salida += "<td align='center'>";
salida += "<a id='stop' href='#' onClick='" + this.nombre_objeto + ".stop();'>:: stop ::</a>";
salida += "</td>";
}
salida += "<tr>";
}
salida += "</table>";
document.writeln(salida);
}
/***** END *****/
</script>
</head>
<body>
<h3 align="center">ejemplo de utilizacin del slideshow</h3>
<hr noshade>
<script>
var presentacion = new Slideshow("presentacion");
_MODO_SLIDE = "full_mode";
_VELOCIDAD_SLIDE = 1500;
presentacion.agregar_imagen("a.jpg", "b.jpg", "c.jpg", "d.jpg");
presentacion.crear_slide();
</script>
</body>
</html>
slideshow.zip( 285 k)Related examples in the same category