slide show Demo




<html>
<head>
  <title>Demostraci?de diapositivas</title>
<script language="javascript">
//*************** CONFIGURACI? ***************//

//***** Ruta de las fotograf? *****//
var _RUTA_FOTOS = "slide_fotos/";  // guarda la ruta (relativa) donde se encuentran las fotograf?.
              // Por defecto, slide_fotos

//***** Rutas de las im?nes 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?nes a usar
  this.posicion = 0; // posici?de inicio
  // m?dos
  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?nes 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 ?ima
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>:: Im?nes todav?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 im?nes definidas
    salida += "</tr>";
    // bot?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>";
    // bot?de ?ima
    if(_MODO_SLIDE == "full_mode" )
    {
      salida += "<td align='center'>";
      salida += "<a id='ultima' href='#' onClick='" + this.nombre_objeto + ".ultima(); return false;'>:: ?ima ::</a>";
      salida += "</td>";
    }
    // controles de reproducci?autom?ca
    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 utilizaci?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>
slide show Demo : Slide Show : Page Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Page Components » Slide Show »

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
