jQuery slider, pura artesania manual

Despues de muchos intentos fallidos ya sean por css, o por requerimientos que uno necesita no encontre un plugin que se adecuara a mis necesidades, de ahi la mala costumbre de hacer artesania manual, las ventajas esque podemos cambiar los eventos de forma inmediata.
Les dejo el codigo y hagan preguntas, script compatible con  explorer, firefox, chrome, safari y opera.
Script para el slider
function avanzar(imagenes,div){ var largo = $(div).css('left'); if(parseInt(largo) != 0){ if(parseInt(largo) < 1 ){ $(div).animate({left: '+=medida_de_tu_imagen'},800); } } } function retroceso(imagenes, div){ var imgCont = imagenes - 1; var limite = (imgCont * medida_de_tu_imagen) * -1; var largo = $(div).position().left; if(parseInt(largo) > parseInt(limite) ){ $(div).animate({left: '-=medida_de_tu_imagen'},800); } }
 div class="Este_sera_el_marco"  tiene que llevar su overflow:hidden para k no se les salga nada de la pantalla que designen
 a id="trigger" onclick="avanzar('3','#retail')" el lanzador que va en el link

 


img src="/images/prev.png" border="0"/ /a  la imagen que gusten de botoncillo

div class="items" esta clase es muy importante, deben poner el ancho calculado de sus imagenes o en auto para que se despliegue a tantos pixeles como sea necesario, como la capa anterior es el contenedor, esta no se vera aunque este mas grande que la pantalla.

 


La pila de imagenes dentro de un div cada una, los divs deben ir con floa left
 div><img src="/images/1.jpg"/ /div
div><img src="/images/2.jpg"//div
div><img src="/images/3.jpg"/ /div
/div

 


Y elboton para regresar el slider
onclick="retroceso('3','#retail')" id="triggerR">
img src="/images/next.png" border="0"/></a
/div  

 


Ejemplo en funcionamiento, de los slides ya aplicado con jqueryScrollTo

 


http://proyectos.mirrorlinux.net/sugar/

 


salu2

Back to Top