Slide Show en Javascript

Actualización: ejemplo en funcionamiento.

Hace ya algunos días @vochomaster me sugirió explicar como hacer un slideshow y me puso como ejemplo uno hecho en flash. A el no le gusta flash, por lo que me pidió que explicara como hacerlo pero en Javascript.

Hace un rato terminé el slide show, aun que la verdad no me convence ya que he usado OLN (Object Literal Notation) para construir el objeto que le da vida al slideshow. @jseros me sugiere que use constructores en lugar de OLN lo cual es una idea genial, y que ya había probado. De hecho el primer prototipo que hice del slideshow estaba basado en constructores y una mezcla entre métodos privados, privilegiados y públicos, pero no me gusto el rumbo que estaba tomando ni la complejidad que estava agarrando. Además, la razón por la que usar constructores es una buena idea, es por que eso nos agrega un punto en reusabilidad, pero al final eh decidido que rehusabilidad no es algo que quiero lograr en este caso debido al consumo de recursos que el efecto genera.

El efecto usa “fuerza bruta” para funcionar y si se abusa puede terminar colgando el navegador. Por supuesto que esto puede mejorarse e implementar mejores métodos para animación en lugar de un simple (y flojo) temporizador, pero este efecto, junto con el de alertas tipo twitter son simplemente propuestas aventadas al aire para servir como inspiración o modelo base de otros proyectos, o simplemente como ejercicios para intermedios en el uso de Js.

Bueno, sin más este es el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>..::**SlideShow**::..</title>
 <script type="text/javascript">
 var ss = {
 body : null,
 trueStop: false,
 intervalo : null,
 velocidad : 1,
 playing : true,
 init: function(){
 ss.body = document.getElementsByTagName('body')[0];
 if(ss.compatible()){
 ss.crearMarco();
 }else{
 alert('Tu navegador sucks!');
 }
 },
 compatible : function(){
 if(document.getElementById && document.getElementsByTagName && document.createElement && document.appendChild && document.removeChild){
 if(ss.body.setAttribute){
 return true;
 }else{
 return false;
 }
 }else{
 return false;
 }
 },
 crearMarco : function(){
 var marco = document.createElement('img');
 marco.setAttribute('src', 'FrameFotografico.gif');
 marco.style.position = 'absolute';
 marco.style.top = document.getElementById('ss').offsetTop + 'px';
 marco.style.left = document.getElementById('ss').offsetLeft + 'px';
 marco.onmouseover = ss.stopSS;
 marco.onmouseout = function(){if(!ss.trueStop){ss.playSS()} };
 ss.body.appendChild(marco);
 ss.crearControles();
 },
 crearControles : function(){
 var controles = document.createElement('div');
 var menos = document.createElement('img');
 var stop = document.createElement('img');
 var mas = document.createElement('img');
 menos.setAttribute('src', 'icon-menos-silver.gif');
 stop.setAttribute('src', 'icon-stop-silver.gif');
 mas.setAttribute('src', 'icon-mas-silver.gif');
 menos.onclick = ss.desacelera;
 stop.onclick = ss.playPause;
 mas.onclick = ss.acelera;

 controles.appendChild(menos);
 controles.appendChild(stop);
 controles.appendChild(mas);
 ss.body.appendChild(controles);

 ss.prepararSS();
 },
 playPause : function(){
 if(ss.playing){
 ss.stopSS();
 this.src = 'icon-play-silver.gif';
 ss.trueStop = true;
 }else{
 ss.playSS();
 this.src = 'icon-stop-silver.gif';
 ss.trueStop = false;
 }
 },
 desacelera : function(){
 if(ss.velocidad > 1){
 ss.velocidad --;
 }
 },
 acelera : function(){
 ss.velocidad++;
 },
 prepararSS : function(){
 document.getElementById('ss').style.overflow = 'hidden';
 document.getElementById('ss').style.position = 'relative';
 ss.lis = document.getElementById('ss').getElementsByTagName('li');
 for(i=0; ss.lis[i]; i++){
 ss.lis[i].style.position = 'absolute';
 ss.lis[i].style.left = i*400 + 'px';
 }
 ss.playSS();
 },
 playSS : function(){
 ss.intervalo = setInterval(function(){
 ss.lis[0].style.left = parseInt(ss.lis[0].style.left) - ss.velocidad +'px';
 for(i=1; ss.lis[i]; i++){
 ss.lis[i].style.left = i*400 + (parseInt(ss.lis[0].style.left)) + 'px';
 }
 if(parseInt(ss.lis[0].style.left) <= -405){
 lisActual = ss.lis[0];
 document.getElementById('ss').removeChild(ss.lis[0]);
 document.getElementById('ss').appendChild(lisActual);
 }
 }, 100);
 ss.playing = true;
 },
 stopSS : function(){
 clearInterval(ss.intervalo);
 ss.playing = false;
 }
 }

 window.onload = function(){
 ss.init();
 }

 </script>
 <style type="text/css">
 ul
 {
 height: 250px;
 width: 400px;
 overflow: scroll;
 padding: 0;
 }
 ul li{
 width: 400px;
 height: 250px;
 float: left;
 border:1px #000 solid;
 list-style-type: none;
 }
 </style>
</head>
<body>
 <ul id="ss">
 <li><br /><br />texto1</li>
 <li><br /><br />texto2</li>
 <li><br /><br />texto3</li>
 <li><br /><br />texto4</li>
 <li><br /><br />texto5</li>
 </ul>
</body>
</html>

Para usar el efecto solo basta con crear una lista desordenada (<ul>) y darle como id el valor “ss”. Después llamar ss.init() al cargar la página.

No me tomo el tiempo para explicar lo que el javascript hace por que creo que es totalmente lineal y entendible, pero si alguien tiene dudas solo pregunteme, o si considera que es necesaria una explicación de código, diganme.

Notar que si el navegador no soporta los métodos necesarios para que el slideshow funcione, el efecto se degradará mostrando un feo pero accesible recuadro con scrolls para ver el contenido de la lista desordenada.

Espero sus comentarios.

6 thoughts on “Slide Show en Javascript

  1. Excelente, Buzu, muy bien logrado. Me gustaria verlo con las imagenes que hiciste, pero no hay link para demo. Bueno, voy a revisarlo completo y ver si puedo crear yo esas imagenes.

    Gracias.

    • Hola, la mejor forma de prsaber si funcioan en blogger es probando. Intenta ponerlos y ya nos cuentas…🙂

      En cuanto a donde ponerlos, solo copia el codigo en un documento y guardalo con extencion .js, depués enlazas el documento mediante una etiqueta script en tu html. Es sencillo, pero tienes que tener por lo menos una idea de html y javascript, de otro modo es como querer arreglar un auto sin saber nada de mecánica.

      Saludos y gracias por rondar el blog.

Comments are closed.