Comunidad de diseño web y desarrollo en internet online

Crear un Slider con efectos en Javascript

Por lordoracle el 10 de Abril de 2012 con 58,663 visitas

HTML, CSS y Javascript Otros tutoriales por lordoracle.

Antes de comenzar este tutorial quiero avisarles que no soy el creador de este slider. Yo lo hice siguiendo un tutorial en inglés que compré. No obstante la traducción y la interpretación del mismo fueron por mi parte. Luego le añadí diversas explicaciones que consideré pertinentes. Es mi forma de aprender. Estoy igual que ustedes, aprendiendo así que les pido que si notan algo que llama la atención lo notifiquen.



Antes de comenzar debemos entender cómo funciona un slider. Se puede decir que a grandes rasgos son imágenes apiladas una sobre otra. Luego mediante javascript se altera su propiedad z-index.

Comenzaremos creando tres archivos:
  • Index.html que contendrá el contenedor del mismo y todo lo referente a divs e imágenes, así como también la llamada a jquery y los archivos javascript y css.
  • Un archivo .js que se llame: JWslider.js
  • Un archivo CSS que contenga los estilos del Slider. Como nombre le pondremos: JWslider.css


Vamos con el código del archivo html:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
       <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
       <script type="text/javascript" src="js/jquery.JWslider.js" ></script>
       <link rel="stylesheet" type="text/css" href="css/JWslider.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title> JW slider</title>
   </head>

   <body>
       <div style="width:960px;margin-left:auto;margin-right:auto;">

           <ul id="test">
               <li><img src="img/im1.jpg"  /></li>
               <li><img src="img/im2.jpg"  /></li>
               <li><img src="img/im3.jpg"  /></li>
               <li><img src="img/im4.jpg"  /></li>
               <li><img src="img/im5.jpg"  /></li>
               <li><img src="img/im6.jpg"  /></li>
               <li><img src="img/im7.jpg"  /></li>
           </ul>

       </div>
   </body>
   </html>


De momento todo luce sencillo. Tenemos las llamadas a los archivos antes mencionadas así como también un div contenedor con una lista. Cada elemento li de la misma llama a una imagen localizada en el directorio img.

El CSS contendrá los siguientes estilos que aún no aparecen:

Código :

.JWslider {  
   padding:0px;  
   position:relative;  
   z-index:100;  
   overflow:hidden;  
   }  
.JWslider ul{  
    list-style:none;  
   padding:0px;  
   margin:0px;  
   position:relative;  
   }  
.JWslider ul li {  
       position:absolute;  
       display:block;  
       width:100%;  
   }  
   .JWslider ul li img {  
       position:relative;  
       z-index:1;  
   }  
   .JWslider .active {  
        z-index:10;  
.JWslider .reset {  
       z-index:3;  
   } 


Podemos ver que las dos últimas clases contienen la propiedad z-index. La clase active tiene un nivel alto y como su nombre lo indica tiene por objetivo aplicarse al elemento de la lista que se está mostrando. La clase reset por el contrario, tiene por objetivo aplicarse al elemento previo que ya no se muestra, o sea la diapositiva previamente activa. Con esto conseguimos mantenerlas en orden.

Código :

.JWslider span {  
       display:none;  
       color:#fff;  
       bottombottom:0px;  
       padding:10px;  
       width:100%;  
       left:0px;  
       position:absolute !important;  
       z-index:555; background:url('i/comment-bg.png');  
       font-family:Verdana, Geneva, sans-serif;  
   }  
   .control_active {  
       background: url('i/active.png') no-repeat!important;  
       height:20px!important;  
       margin-top:9px!important;  
   }  
   .control_hover {  
       background: url('i/active.png') top no-repeat!important;  
       height:20px!important;  
       margin-top:9px!important;  
   }


Puede parecer extraño ver un elemento span aquí. Lo cierto es que el mismo será utilizado para mostrar texto que vaya a diversas páginas.

Finalmente tenemos las dos últimas clases que remiten al control del slider. Como pueden notar, es una simple imagen que podemos conseguir en cualquier lado e incluso dibujar nosotros. Y ahora viene lo difícil que es el archivo Javascript. Lo mejor es entender cómo funciona cada porción de código por separado y qué hace cada una en su totalidad.

Estructura básica de un plugin jQuery



Código :

   (function($) {

       $.fn.JWslider = function(options){

       }
}(jQuery));


Se declara una función que recibe el parámetro options que está entre paréntesis como todo parámetro, y la función se llama JWslider. Este es el motivo por el cual en el código del CSS anterior usamos como clase principal .JWslider, es porque, si bien todavía ésta no existe, la añadiremos con jQuery.

Agregar las opciones

Ahora seguiremos definiendo las propiedades del slider.

Código :

   var defaults = {
       time: 4000,
       width: 600,
       height: 400,
       effect: 'none',
       blocksize: {height:'',width:'' },
       duration: 700,
       controls: true,
       customblocksize: {
         // image transitions global settings
         cubeoutcenter      : { height:100, width:100 },
         cubegrow           : { height:100, width:100 },
         cubesidegrow       : { height:100, width:100 },
         stripealternate    : { height:100, width:40  },
         stripefade         : { height:100, width:40  },
         stripehalfalternate: { height:100, width:40  }
       },
       callback:function(){   } 
   };

Podemos ver que se definen varias cosas. El tiempo de duración de las transiciones, el ancho, el alto, el tipo de efecto, la duración, si mostrar o no los controles (por defecto en true se muestran) y custom blocksize que son las medidas de bloques pequeños que se usarán para los efectos. Cuando digo bloques pequeños, me refiero a bloques div.

Tienen un ancho y un alto de 100px. ¿Podemos decir entonces que cada tipo de efecto es un bloque div que se comporta de forma diferente?

Lo último es una función de llamada:

Código :

callback:function(){   }


Truco utilizado en varios lenguajes de programación Javascript no es la excepción. Cito a Wikipedia para que entiendan para qué sirve un callback:

wikipedia :

es una función "A" que se usa como argumento de otra función "B". Cuando se llama a "B", ésta ejecuta "A".

Aquí podríamos decir que el código antes de A es el ancho el alto, la duración, etc, etc y que cuando llamemos a B (callback) ejecutará A. Rebuscado, interesante y súper útil.

Agregando las variables:

Ahora, vamos a declarar las variables que utilizaremos en la secuencia de comandos; también obtendremos referencias a todos los elementos que vamos a utilizar con frecuencia.

Código :

   var options = $.extend(defaults, options);
   var root    = $(this);
   var li      = root.find("li");
   var images  = li.find("img");

   var pos, random_no, timer, image_timer, arr, 
       index, block, w, h, src, parent, im, 
       override = false, 
       in_animation = false,
       controls;

   var current = li.eq(1).toggleClass('active'),
       prev = li.first().addClass("reset");

   var bool = true,
       first_bool = true;


La primer línea llama poderosamente la atención. Aparece la primera función de jQuery; “.extend” que recibe dos parámetros: defaults y options. Lo que extend hace es combinar dos objetos. En este caso combina defaults con options. Ahora options tiene todo el power de defaults. Luego tenemos un this que sirve para hacer referencia a un objeto en particular. Se utiliza para decir: esto es propiedad de esto.

La variable li tiene como valor “root.find(”li”)” donde aparece otro elemento de jquery que es .find, el cual cumple una función muy similar a .children. La diferencia con éste es que puede buscar elementos más distantes en el árbol del DOM y no limitarse sólo a los hijos directos. Y recibe como parámetro li en este caso.

Luego se declara la variable img en el cual vemos una sentencia parecida:

Código :

   var images  = li.find("img");


Pero esta vez hilamos más fino y capturamos el elemento img que lógicamente es una imagen.
Veremos después qué hacen el resto de las variables. El siguiente paso es la modularización del plugin o slider. Esto hace la cosa más sencilla.
  • Una función de inicio llamada Init que contendrá todo.
  • Una función Switcher que “switchea” los slides.
  • Un modulo de efectos aplicados a las imágenes.
  • Una función de efectos que cambia aleatoriamente las animaciones, basado en datos seteados por el usuario.
  • Una función para darle vida al control del slider.
  • Una función que traiga las imágenes al frente cuando el usuario hace click en el control basado en su índice.
  • Y una función que se ejecuta cuando el efecto termina, esconde el texto actual y prepara la próxima imagen.


Declaramos entonces la primera función y dentro de la misma decimos que si las opciones de control del slider es verdadera, añada controles (appendControls), y se le dice que tome el primer elemento de la lista, obtenga la etiqueta span y le aplique las propiedades css display, block y las oculte. Luego a cada elemento root le coloca como clase un elemento contenedor llamado JWslider. Por algo anteriormente seteamos sus estilos en el archivo CSS.

Por último obtenemos el padre de cada uno de los elementos actuales y les asignamos los width y height que seteamos en options.

Código :

function init()
   {
       if(options.controls==true)
       {
           appendControls();
       }

      li.first().find("span").css("display","block");
      current.children().hide();

      root.wrap("<div class='JWslider' />");
      root.parent().css({"width":options.width,height:options.height});

   }


Switcher


Conmutacion de los slides es la palabra. Se trata de la adición de la clase active al elemento siguiente y la clase reset al elemento actual. Primero se guarda, el elemento anterior si no lo hubo es porque llegamos al final. Esta es la manera de movernos a través de la lista en el sentido de las agujas del reloj. Esto quiere decir que la primera imagen vendrá después que la última. Se remueve la clase reset con removeClass (de jQuery) y se la añade al elemento actual. Por último, la siguiente diapositiva se establece como activa y su imagen está oculta, porque nosotros estamos animando los bloques del div que aparecerá mas tarde.

Código :

function switcher()
   {
       if(current.prev().length > 0)
           prev = current.prev();
       else
           prev = li.last();

       prev.removeClass("reset");

       current.toggleClass("active reset");

       if(current.next().length > 0)   // setting the next slide
           current = current.next();
       else
           current = li.first(); 

       current.children().hide();
       current.addClass("active");
       options.callback(current.children()[0]);
   }


Codificando los efectos personalizados

Y ahora viene la parte más complicada que es animar los efectos. Se puede crear cualquier efecto usando combinaciones de bloques divs de diversos anchos y altos.

La gran mayoría de los sliders tiene dos combinaciones: la creación de franjas horizontales o verticales y uno un poco más complejo que lo hace por etapas, cubriendo diversos campos de la imagen. De ahí como le dicen en USA “stages”.

Palabra clave para recordar: animación de pequeños bloques de divs.


Efecto 1: Salida en bloque desde el centro


in_animation es una variable que utilizaremos para ver si proceder o no cuando el usuario manualmente clickea en los controles. w y h son el ancho y el alto de los pequeños bloques de divs.

En este efecto crece un cuadrado desde la posición inicial de su zona. Se define entonces la función cubeoutcenter con el parámetro image. Se establece como verdadera la variable in_animation. Y luego chequeamos si el tamaño del bloque global está seteado por el usuario o no. Recordemos que con anterioridad le pusimos a customblocksize 100px de width y 100px de height. De ahí el options.blocksize.width y options.blocksize.height asignados a w y h.

Código :

   function cubeoutcenter(image)
   {
       in_animation = true;
       if(options.blocksize.width!='') {
           w = Math.floor(options.blocksize.width);
           h = Math.floor(options.blocksize.height);
       }
       else {
           w = Math.floor(options.customblocksize.cubeoutcenter.width);
           h = Math.floor(options.customblocksize.cubeoutcenter.height);    
       }
       parent = image.parent();
       arr = new Array(); i = 0;  j = 0; index = 0;
       src = image.attr("src");
   };   
   


Lo cierto es que ver el objeto Math puede resultar bastante intimidante. A grandes rasgos, posee una serie de propiedades y eventos para sacarle partido a todas las posibilidades aritméticas del navegador. El método de Math que interesa aquí (posee una decena más sumados a unas cuantas propiedades) es floor, que lo que hace es redondear un número decimal a su inmediato entero. Y la razón por la cual se lo utiliza aquí es porque las coordenadas del browser son en decimales.
  • La variable parent obtendrá el elemento padre de la imagen, o sea, li.
  • Se inicializan las variables i, j e index para utilizarla en loops, etc.
  • Src contiene el lugar donde está alojada la imagen y lo usa para asignárselo como fondo al div.


Y ahora crearemos el div con las siguientes propiedades:

Código :

block = $("<div />", {
       css:{
           position: "absolute",
           width: 0,
           height: 0,
           marginTop: h/2,
           marginLeft: w/2,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'none'
       }
   }).addClass('disblock');


El mismo está posicionado de forma absoluta con un ancho y un alto de 0 (los tomará de h y w) y la vieja fórmula para centrar un elemento es:

Código :

Margin-top: h/2
Margin-left: w/2


Tomará, como dije antes, la imagen como fondo y tendrá un nivel de z-index de 99. Recordemos que los divs son divisiones y que con z-index los convertimos en capas. Con este valor aparece en el frente.
Se agrega (mediante jQuery) la clase disblock para poder remover el bloque una vez que la animación concluya.

Ahora se debe crear un bucle que itera hasta que la variable sea menor que el ancho del slider y dentro un bucle anidado hasta que la variable sea menor que el alto.

Ahora se crea un clon (con la propiedad .clone de jQuery) del boque div con una imagen de fondo a cambiar. Después de cada iteración cambia la posición del fondo (con background-position) para por último anexarlo (con .append de jquery) a su padre, que es li.


Para realizar el bucle usaremos las variables j e i.

Código :

while(i<options.width)
   {
       j = 0;
       while (j<options.height)
       {    
           arr[index] = block.clone().css({left:i ,top:j,backgroundPosition:-i+"px "+-j+"px" });
           parent.append(arr[index++]);
           j = j + h;
       }
       i = i + w;
   }
   

Ahora que hemos añadido los bloques, tenemos que añadir la animación. Por lo tanto será animar los bloques para dar nuestro efecto. Para ello, utilizaremos setInterval con el tiempo de intervalo de 80 milisegundos. Ya tenemos los elementos de bloque dentro de la matriz de arr, que deberemos recorrer desde su posición inicial y animar cada bloque.

Estos, a medida que se expanden, reducirán los márgenes para que los mismos aparezcan en el centro de la zona. Finalmente comprobaremos si la variable es mayor que el tamaño del array (matriz) y de ser así pediremos a la función endeffect que haga eso: End Effect.

Entonces, repasando, sabemos que para el efecto:
  • Se crea el bloque, se lo clona y se lo anexa al elemento padre li.
  • Se crea la animación.
  • Se finaliza la animación.


Vamos con la animación:


Código :

i = 0;

   timer = setInterval(function(){

       if(i>=arr.length)
       { 
           endeffect(image);
           return;
       }

       arr[i++].animate({
           height: h,
           width: w,
           marginTop: 0,
           marginLeft: 0
       } , {
           duration: options.duration,
           easing:'easeOutSine'
       });

   }, 80);


Cube Out Center: código completo



Código :

function cubeoutcenter(image)
   {
       in_animation = true;
      if(options.blocksize.width != ''){
           w = Math.floor(options.blocksize.width);
           h = Math.floor(options.blocksize.height);
       }
       else
       {
           w = Math.floor(options.customblocksize.cubeoutcenter.width);
           h = Math.floor(options.customblocksize.cubeoutcenter.height);    
       }
       parent = image.parent();
       arr = new Array(); i =0;  j =0; index = 0;
       src = image.attr("src");
       block = $("<div />" , {
           css:{
               position: "absolute",
               width: 0,
               height: 0,
               marginTop: h/2,
               marginLeft: w/2,
               'background-image': 'url('+src+')',
               zIndex: 99,
               display: 'none'
           }
       }).addClass('disblock');

       while(i < options.width)
       {
           j = 0;
           while(j < options.height)
           {
               arr[index] = block.clone().css({
                   left:i,
                   top:j,
                   backgroundPosition: -i + "px " + -j + "px"
               });
               parent.append(arr[index++]);
               j = j + h;
           }
           i = i + w;
       }
       i = 0;
       timer = setInterval(function(){

           if(i >= arr.length)
           { 
               endeffect(image);
               return;
           }

           arr[i++].animate({ 
               height: h,
               width: w,
               marginTop: 0,
               marginLeft: 0
           },{
               duration: options.duration, 
               easing: 'easeOutSine'
           });
       },80);
   };   

Animate, perteneciente a jQuery, tiene la función de crear una animación personalizada de un conjunto de propiedades de CSS. En este caso:
  • Height: con los valores de h
  • Width: con los valores de w
  • Margin-top
  • Margin-left
  • Options.duration fue declarada al principio del tutorial y tiene como valor 700.


Efecto cuadrado 2: Efecto SideGrow o “crecer de lado”



Este efecto, en lugar de crecer desde el centro, lo hace desde uno de los lados. El código es el mismo que el anterior con las siguientes diferencias:

Código :

block = $("<div />" , {
       css: {
           position: "absolute",
           width: 0,
           height: 0,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'none'
       }
   }).addClass('disblock');


Como se puede ver, desaparecen las propiedades que hacían alusión a los márgenes top y left. En lugar de indexarlos de manera secuencial se repite la matriz de manera aleatoria utilizando una función llamada: random_array que devuelve un array de números aleatorios y que debe recibir una medida como parámetro:

Código :

random_no = random_array(arr.length); // array of random numbers


La última parte es casi igual, salvo que no necesitaremos los márgenes para hacer la animación. Usaremos los valores de la matriz antes mencionada.

Código :

timer = setInterval(function(){

       if(i >= arr.length)
       {
           endeffect(image);
           return;
       }

       arr[random_no[i++]].animate({
           height: h,
           width: w,
           opacity: 1
       },{
           duration: options.duration,
           easing:'easeOutCubic'
       });
   },80);
   


Efecto de bandas



Crearemos una animación de bandas que vaya desde lados opuestos de manera vertical u horizontal. Todo el código anterior es el mismo pero lo que cambia es lo siguiente en la parte de animación y css:

Código :

if(options.blocksize.width!='')
       w = Math.floor(options.blocksize.width);
   else
       w = Math.floor(options.customblocksize.stripefade.width);

   h = options.height;


Tengan en cuenta que estamos aplicando esto para líneas verticales. Si lo quieren hacer al revés, o sea líneas horizontales, inviertan el código de arriba.

El bloque de CSS cambia a esto:

Código :

   block = $("<div />" , {
       css: {
           position: "absolute",
           width: w,
           height: h,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'block',
           marginTop:options.height,
           opacity: 0
       }
   }).addClass('disblock');


Nótese que el valor de h y w no es 0. Esto es así porque no queremos que crezcan las líneas horizontales y verticales, queremos que las bandas aparezcan de manera alternativa. Por ahora se colocará cada una debajo del escenario del slider. Esto es porque todos los bloques tendrán valores de márgenes positivos, así que vamos a implementar una condición que aplique una propiedad de margen superior a negativo en base a la altura del slider.

Código :

   while(i<options.width)
   {
       if(flag==true)
       {
           css = {left:i, backgroundPosition: -i + "px 0px" };
           flag = false;
       }
       else
       {
           css = {left:i, backgroundPosition: -i + "px 0px", marginTop: -options.height };
           flag = true;
       }
       arr[index] = block.clone().css(css);
       parent.append(arr[index++]);
       i = i + w;
   }



La última parte es casi igual, excepto que no necesitaremos las propiedades height y width de animación. Simplemente establecemos: margen superior a 0 y la opacidad a 1.

Código :

   timer = setInterval(function(){

       if(i>=arr.length)
       {
           endeffect(image);
           return;
       }
       arr[i++].animate({
           marginTop:0,
           opacity:1
       },{
           duration: options.duration, 
           easing:'easeOutSine'
       });
   },80);


Efecto de bandas con atenuación



Pocos cambios con respecto al código anterior. Lo primero es que las animaciones de transición suelen tener rayas verticales u horizontales de longitud completa, por lo que la variable de inicialización cambia a esto:

Código :

   if(options.blocksize.width!='')
       w = Math.floor(options.blocksize.width);
   else
       w = Math.floor(options.customblocksize.stripefade.width);

   h = options.height;


Estamos creando franjas verticales de longitud completa con anchura definida en las opciones.

El CSS cambia a esto:

Código :

block = $("<div />", {
       css: {
           position: "absolute",
           width: w,
           height: h,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'block',
           opacity: 0
       }
   }).addClass('disblock');


Como sólo nos interesa atenuar, no hay márgenes. En la sección del bucle sólo estamos estableciendo la posición del fondo y anexándolo en el padre, además de cambiar la posición de los bloques.

Código :

while(i<options.width)
   {
       arr[index] = block.clone().css({left:i, backgroundPosition: -i + "px 0px" });
       parent.append(arr[index++]);

       i = i + w;
   }

   i = 0;


La última parte es casi igual, excepto que no necesitaremos las propiedades margin-top, width y height en la animación. Simplemente establecemos la opacidad a 1. Ahora tenemos un bonito Fade.

Código :

timer = setInterval(function(){

       if(i>=arr.length)
       {
       endeffect(image);
       return;
       }

       arr[i++].animate({
           opacity:1
       },{
           duration: 700, 
           easing:'easeOutSine'
       });
   },80);


Se podría haber utilizado la función fadeIn, pero esto genera un bug en Chrome.

Creación del módulo de efecto final



Ahora es el momento de crear la función que se llama después de que todos los bloques han sido animados.

Código :

function endeffect(image)
   {
       current.find("span").fadeIn('slow');
       if(options.controls==true)
       {
           controls.removeClass("control_active");
           controls.eq(current.index(".JWslider li")).addClass("control_active");
       }
       clearInterval(timer);
       setTimeout(function() {
           image.show();            // show the real image
           $(".disblock").remove(); // remove the divs
           // switch next slide
           in_animation = false;
           if(override == false)      // Return if manually triggered
               image_timer = setTimeout(function() { 
                   switcher();
                   image.next().fadeOut('slow');
                   effects();
               }, options.time); 
       },1000);
   };



Construcción del módulo de efectos



El módulo de efectos principales decide qué efecto mostrar. Es más simple que los otros. Lo primero que se hace es generar un número aleatorio entre 0 y el número de efectos disponibles. A continuación comprobamos si la opción global se establece en un número especial y se establece una variable en 1.

La parte siguiente es un caso especial: si un usuario intenta hacer click manualmente en los controles antes de que comience la presentación de diapositivas, finalmente usaremos el switcher para seleccionar el efecto basado en el valor de la variable ch.

Código :

   function effects()
   {
       var ch = Math.floor(Math.random()*6);

       if(!isNaN(options.effect))
           ch = options.effect;

       if(bool==true)
       {
           li.first().find("span").hide();
           bool=false;
           first_bool = false;
       }

       switch(ch)
       {
           case 0:cubesidegrow(current.find("img"));break;
           case 1:cubeoutcenter(current.find("img"));break;
           case 2:cubegrow(current.find("img"));break;
           case 3:stripealternate(current.find("img"));break;
           case 4:stripefade(current.find("img"));break;
           case 5:stripehalfalternate(current.find("img"));break;
       }
   }


Creando los controles



Ahora vamos a trabajar con controles. En este módulo agregamos la lista de control después de nuestro slider y establecemos al primer elemento de la lista la clase control_active puesta con anterioridad en el CSS. Los elementos de la lista de control se encargarán de eventos, tales como la función de setImage on click al cual se lo llama con su índice como parámetro, o las funciones hover que alternan con la clase control_hover.

Código :

   function appendControls()
   {
       var str = "<ul class='controls'>";
       for(var i=0;i<li.length;i++)
           str = str + "<li>"+(i+1)+"</li>";

       str = str+"</ul>";

       root.after(str);

       controls = root.parent().find(".controls li");
       controls.first().addClass("control_active");

       controls.bind({
           click    : function() { setImage($(this).index());    },
           mouseover: function() { $(this).toggleClass("control_hover"); },
           mouseout : function() { $(this).toggleClass("control_hover"); }
       });
   }


Configuración de la imagen



El Slider está casi completo ahora hay que implementar el módulo setImage. El mismo tomará el parámetro index y animará la imagen.

En primer lugar comprobaremos si in_animation se establece en true. De ser así, veré si el usuario ha hecho click en el mismo elemento de control, si eso es cierto volveremos, si in_animation es false entonces haremos las siguientes tareas: Remover las clases “reset” y active de los slides, y desactivar el sistema automático de slides.

Ahora el bloque de prueba (test en el html) es la condición especial que se cumple cuando el usuario hace click en los controles. Para esto tenemos que agregar manualmente la clase reset a la primera diapositiva. Ya que esto es necesario sólo la primera vez (si el usuario hace click en el control), estableceremos en false cuando los módulos de efectos se llaman la primera vez.

A continuación agregaremos la clase reset a la diapositiva actual y active a la diapositiva que se basa en el parámetro que recibimos de index.

Se hace un fadeIn de la etiqueta span de esa diapositiva y se llama a la función de efectos. Es bastante parecida a la función switch.

Código :

function setImage(index)
   {
       if(in_animation == true || current.index(".JWslider ul li") == index)
           return;

       li.removeClass("reset active");

       current.find("span").hide();   

       clearTimeout(image_timer); // Manual Override...

       if(first_bool==true)
       {
           li.first().addClass("reset");
       }
       current.addClass("reset");
       current = li.eq(index).addClass("active");
       current.children().hide();
       current.find("span").fadeIn(700);   
       override = true;
       effects();
   }


Arranque de los motores



Por lo tanto, todo está listo! Vamos a arrancar nuestro slider llamando a la función de efectos con la duración que se define en la opción.

Código :

image_timer = setTimeout (function() {effects();}, options.time); / / A partir de la presentación de diapositivas


Todo el código anterior a este fragmento de código se ajusta dentro de la función init;


Aplicar el generador de números aleatorios

Ahora vamos a implementar una función sencilla que genera una matriz de números. Esta función está fuera el plugin de jQuery.

Código :

function random_array(maxn)
   {
       var array = new Array();
       var temp,i,flag=true;
       var index =0;
       while(index<maxn)
       {
           flag = true;
           temp = Math.floor(Math.random() * maxn);
           for(i=0;i<array.length;i++)
           {
               if(temp==array[i])
               {
                   flag=false;
                   break;
               }
           }
           if(flag==true)
               array[index++] = temp;
       }
       return array;
   };



Aunque nuestro slider está completo, cuando Javascript está desactivado y todo falla, las imágenes se muestran todas fuera de lugar. Para eso podemos agregar una pequeña corrección mediante CSS.
Lo que se hace entonces es agregar un div wrapper (contendor) y estilizarlo un poco. El estilo para este elemento sería el siguiente:

Código :

 #wrapper {height: 410px; overflow: auto;}


Si está activado JavaScript, fácilmente podemos cambiar esto mediante la función CSS:

Código :

$(function(){
       $("#wrapper").css({height:"auto" , overflow:"visible"}); // Restablecer de nuevo 
       $("#test").JWslider();
   });


Eso es todo.

Ver Demo - Archivos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (25)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate