Jquery

Cargado por

caracolies
48 vistas23 páginas

Título original

jquery

Derechos de autor

© Attribution Non-Commercial (BY-NC)

Formatos disponibles

DOCX, PDF, TXT o lea en línea desde Scribd

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Denunciar este documento

Copyright:

Attribution Non-Commercial (BY-NC)
Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
Marcar por contenido inapropiado
48 vistas23 páginas

Jquery

Título original:

jquery

Cargado por

caracolies

Copyright:

Attribution Non-Commercial (BY-NC)
Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
Marcar por contenido inapropiado
de 23

CONTROL Tipo Button y METODOS Ready y Click

Vamos a capturar el evento de un control HTML de tipo button:


<html> <head> <title>Problema</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html>

Lo primero que tenemos en cuenta es que debemos importar la librera: <script type="text/javascript" src="jquery.js"></script>

La funcin principal de esta librera se llama $, utilizamos la funcin $ para crear un objeto de la clase jQuery. Funciones2.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); ----------- x.click(presionBoton) }

Comandos necesarios para cargar y crear el objeto

el id del control botn en el html

function presionBoton() { alert("Se presion el botn"); }

El mtodo ready tiene como parmetro un nombre de funcin. Esta funcin se ejecutar cuando todos los elementos de la pgina estn cargados. Es importante notar que solo pasamos el nombre de la funcin y no disponemos los parntesis abiertos y cerrados al final. Finalmente llamamos al mtodo click pasando como parmetro el nombre de la funcin que se ejecutar al presionar dicho botn.

CONTROL tipo H1 y METODO Css Pgina que muestra dos ttulos de primer nivel<H1>, al ser presionados cambiar el color de la fuente, fondo y la fuente del texto.
<head> <title>Problema</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1 id="titulo1">Primer ttulo</h1> <h1 id="titulo2">Segundo ttulo</h1> </body>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos);

Comandos necesarios para cargar y crear el objeto

function inicializarEventos() { var x; x=$("#titulo1"); ------------------ $("#titulo1").click(presionTitulo1) x.click(presionTitulo1) x=$("#titulo2"); -------------- el id del control h1 en el html x.click(presionTitulo2)-----Se aplica el evento click }

Estas dos funciones se ejecutan al presionar los ttulos:


function presionTitulo1() { var x; x=$("#titulo1"); x.css("color","#ff0000");----------- Mtodo CSS x.css("background-color","#ffff00"); x.css("font-family","Courier"); } function presionTitulo2() { var x; x=$("#titulo2"); x.css("color","#ffff00"); ----------- Mtodo CSS x.css("background-color","#ff0000"); x.css("font-family","Arial"); }

El Mtodo CSS nos permite modificar una propiedad de la hoja de estilo de un elemento HTML. Este mtodo tiene dos parmetros: El primero indica el nombre de la propiedad y el segundo el valor a asignarle.

Para Cualquier Tipo de Elemento

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.) es: $("nombre del elemento").
<html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <table border="1"> <tr> <td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</ td> </tr> <tr> <td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</ td> </tr> <tr> <td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</ td> </tr> </table> </body> </html>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("tr"); x.click(presionFila); } function presionFila() { var x; x=$(this); -------------------------x.css("background-color","eeeeee"); }

Obtenemos la referencia a todos los elementos HTML de tipo 'tr'

Para obtener la referencia de que o cual elemento en particular dispar el evento

Mtodo Hide y Selector Lista

Al presionar un botn esconde la lista1.


<body> <input type="button" value="ocultar item primer lista" id="boton1"> <h2>Lista 1</h2> <ul id="lista1"> <li>Opcin nmero <li>Opcin nmero <li>Opcin nmero <li>Opcin nmero </ul> <h2>Lista 2</h2> <ul #id="lista3"> <li>Opcin nmero <li>Opcin nmero <li>Opcin nmero <li>Opcin nmero </ul> </body> </html>

--------------A 1</li> 2</li> 3</li> 4</li>

Ocultar

-------------A 1</li> 2</li> 3</li> 4</li>

seguir Mostrando

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(ocultarItem); } function ocultarItem() { var x; x=$("#lista1 li"); ---- Defino x.hide();----- Mtodo Hide }

que elementos de la lista se esconden

Usando CSS definidas

Mostrar una serie de lenguajes de programacin y que al presionar un botn se alumbren los lenguajes orientados a objetos. x=$(".nombre de clase"); ---- La clase del control: cualquiera en el html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> ---OJO <script type="text/javascript" src="../jquery.js"></script>---OJO <script type="text/javascript" src="funciones.js"></script>---OJO </head> <body> <p>Cuales de los siguientes lenguajes son orientados a objetos: <span class="resaltado">Java</span>, VB6, <span class="resaltado">C++</span>, C, <span class="resaltado">C#</span>, Cobol ?</p> <input type="button" id="boton1" value="ver resultado"> </body> </html>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(resaltar); } function resaltar() { var x; x=$(".resaltado"); ---------------x.css("background-color","ffff00"); }

Los elementos de la clase resaltado

Estilos.css
.resaltado{ color:#000000; }

Mtodos Text (), Text (valor)

Para saber el contenido de un elemento, el objeto jQuery cuenta con un mtodo llamado text(), por ejemplo:
var x=$("#parrafo1");

Luego si hacemos x.text() obtenemos el contenido del prrafo con id igual a parrafo1. Luego si queremos cambiar el texto del prrafo deberamos disponer:
var x=$("#parrafo1"); x.text("Este es el texto nuevo"); <body> <input type="button" value="Modificar el texto de un prrafo" id="boton2"><br> <input type="button" value="Modificar el texto de los elementos td de una tabla" id="boton3"><br> <p id="parrafo1">Texto del primer prrafo</p> <table border="1"> <tr> <td>celda 1,1</td><td>celda 1,2</td> <td>celda 2,1</td><td>celda 2,2</td> </tr> </table>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { x=$("#boton2"); x.click(modificarTexto); x=$("#boton3"); x.click(modificarDatosTabla); } function modificarTexto() { var x=$("#parrafo1"); x.text("Nuevo texto del prrafo"); } function modificarDatosTabla() { var x=$("td"); x.text("texto nuevo"); }

Lo que hay en el id=parrafo1 lo cambia a esa nueva cadena.

Mtodos: - attr(nombre de propiedad) - attr(nombre de propiedad,valor) - removeAttr(nombre de propiedad)

Estos mtodos nos permiten agregar propiedades a un elemento HTML y recuperar el valor de una propiedad. Para recuperar el valor de una propiedad: $(elemento).attr(nombre de propiedad) Para fijar el valor de una propiedad: $(elemento).attr(nombre de propiedad,valor) Para eliminar una propiedad de un elemento o conjunto de elementos tenemos: $(elemento).removeAttr(nombre de la propiedad)

Ejemplo: Definir una tabla sin el atributo border. Al presionar un botn aadirle la propiedad border con el valor 1. Si se presiona otro botn recuperar y mostrar el valor del atributo border y por ltimo si se presiona otro botn eliminar la propiedad border.
<body> <input type="button" id="boton1" value="Aadir propiedad border"> <input type="button" id="boton2" value="Recuperar valor de la propiedad border"><br> <input type="button" id="boton3" value="Eliminar la propiedad border"> <table id="tabla1"> <tr> <td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</ td> </tr> <tr> <td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</ td> </tr> </table>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(agregarPropiedadBorder); x=$("#boton2"); x.click(recuperarPropiedadBorder); x=$("#boton3"); x.click(eliminarPropiedadBorder); }

function agregarPropiedadBorder() { var x=$("#tabla1"); x.attr("border","1"); ------ 2 parametros, agregando la propiedad } function recuperarPropiedadBorder() { var x=$("#tabla1"); if (x.attr("border")!=undefined) alert(x.attr("border")); else alert("No est definida la propiedad border en la tabla"); }

OJO: Esta funcin de recuperar es si inicialmente en el html tiene definida su propiedad sino la tiene muestra el else, y si, si la tiene en otro caso muestra el valor de su propiedad.
function eliminarPropiedadBorder() { var x=$("#tabla1"); x.removeAttr("border"); --- Eliminar la }

propiedad

Mtodos addClass y removeClass.

Los mtodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML. Cuando se presione un botn asociarle una clase (.class del archivo estilos.css) y cuando se presione otro desasociarlo de dicha clase.
function asociarClase() { var x=$("#descripcion"); --- descripcin es el id del div. x.addClass("recuadro"); ---- recuadro es la clase en el estilo css y cambia de

apariencia cuando se ejecuta este mtodo.


} function desasociarClase() { var x=$("#descripcion"); x.removeClass("recuadro"); } <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> -- Obligatorio <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head>

Mtodos html() y html(valor)

El mtodo: html([bloque html]): Nos permite agregar un bloque de html a partir de un elemento de la pgina.
<html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Mostrar formulario"> <div id="formulario"> </div> ----------</body> </html>

OJO div reservado

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton1); x=$("#boton2"); x.click(presionBoton2); } function presionBoton1() { var x; x=$("#formulario"); ----- OJO es donde ingresa el bloque html x.html('<form>Ingrese nombre:<input type="text" id="nombre"> <br>Ingrese clave:<input type="text" id="clave"><br> <input type="submit" value="confirmar"></form>'); }

Para imprimir es: alert(x.html());

Administracin de eventos con jQuery

Con este cdigo a continuacin se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1":
var x; x=$("#formulario1 button"); x.click(presionBoton)

Tambin este cdigo:


var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("p"); ------------------------------------- Todos los prrafos del documento html x.click(presionParrafoDocumento); x=$("#tabla2 p"); ------------------------- Todos los prrafos de la tabla2 asociados x.click(presionpresionParrafoSegundaTabla); } function presionParrafoDocumento() { alert('se presion un prrafo del documento'); } function presionpresionParrafoSegundaTabla() { alert('se presion un prrafo contenido en la segunda tabla.'); }

Eventos mouseover y mouseout

Implementaremos una pgina que contenga 2 hipervnculos, cuando ingrese la flecha del mouse al hipervnculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.
<body> <a href="http://www.lanacion.com.ar">La nacin</a> <br> <a href="http://www.clarin.com.ar">El clarn</a> <br> </body>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("a"); x.mouseover(entraMouse); x.mouseout(saleMouse); } function entraMouse() { $(this).css("background-color","#ff0"); } function saleMouse() { $(this).css("background-color","#fff"); }

La funcin entraMouse accede al elemento que recibe en su interior el mouse (la obtenemos mediante la referencia que guarda this).

Evento Hover

Es como utilizar los eventos mouseover y mouseout en comn. $(elemento).hover([funcin de ingreso del mouse],[funcin de salida del mouse]) Es decir que al evento hover asociamos dos funciones, la primera se ejecuta cuando ingresamos la flecha del mouse dentro del elemento y la segunda cuando retiramos la flecha del mouse.
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("a"); x.hover(entraMouse,saleMouse); } function entraMouse() { $(this).css("background-color","#ff0"); } function saleMouse() { $(this).css("background-color","#fff"); }

Evento dblclick
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <div id="recuadro"> <h1>Doble clic para ocultar este recuadro</h1> </div> </body> </html>

Funciones.js
var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#recuadro"); x.dblclick(dobleClic); } function dobleClic() { var x; x=$(this); x.hide() }

Obtenemos la referencia del elemento que emiti el evento y llamamos al mtodo hide para que lo oculte. Estilos.css
#recuadro { color:#aa0; background-color:#ff0; position:absolute; text-align:center; left:40px; top:30px; width:800px; height:70px; }

Funciones ANONIMAS en nuestro Cdigo

Problema: Confeccionar una pgina que muestre dos ttulos de primer nivel, al ser presionados cambiar el color de fuente, fondo y la fuente del texto.
<title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1 id="titulo1">Primer ttulo</h1> <h1 id="titulo2">Segundo ttulo</h1> </body> </html>

Funciones.js
var x; ------------------------------------x=$(document); ----------------------------x.ready(function(){------------------------var x; x=$("#titulo1"); x.click(function() { var x; x=$("#titulo1"); x.css("color","#ff0000"); x.css("background-color","#ffff00"); x.css("font-family","Courier"); }); x=$("#titulo2"); x.click(function () { var x; x=$("#titulo2"); x.css("color","#ffff00"); x.css("background-color","#ff0000"); x.css("font-family","Arial"); }); })

Ordenado y como antes


var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(resaltar); }

Rapido y Ligero $(document).ready(function(){ //Todo el bloque: x=$("#titulo1"); x=$("#titulo2");


}

Normalmente uno utiliza funciones annimos cuando el algoritmo contenido en la funcin solo se requiere para dicho evento.

La sintaxis para definir una funcin annima:


x.ready(function(){ ...... })

Como vemos llamamos al mtodo ready y entre parntesis incluimos la funcin tal como las venimos implementando en conceptos anteriores pero sin nombre.

Llamadas encadenadas de Mtodos jQuery

Metodo fadeTo: Modifica la opacidad de un elemento. Podemos inicializar este mtodo de las siguientes formas:
fadeTo([velocidad],[valor de opacidad]) <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Reducir opacidad y ocultar"> <input type="button" id="boton2" value="Mostrar en forma instantnea"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. </p> </div> </body> var x; </html> x=$(document); x.ready(inicializarEventos);

Funciones.js

function inicializarEventos() { var x=$("#boton1"); x.click(ocultarRecuadro); $("#boton1").click(function () { x=$("#boton2"); $("#descripcion").fadeTo("slow",0.5).hide("slow"); x.click(mostrarRecuadro); }); } $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); function ocultarRecuadro() }) { }) var x=$("#descripcion"); x.fadeTo("slow",0.5); Estilo.css x.hide("slow"); } .recuadro { background-color:#ffffcc; function mostrarRecuadro() font-family:verdana; { font-size:14px; var x=$("#descripcion"); $(document).ready(function () {

x.show(); x.fadeTo("slow",1); }

Es importante notar que los mtodos se ejecutan de izquierda a derecha.

Men Desplegable

Confeccionaremos una pgina que muestre un men desplegable utilizando listas.


<head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <div id="menu"> <ul> <li><a href="http://www.google.com.ar">Google</a></li> <li><a <ul> <li><a <li><a <li><a </ul> </li> <li><a <ul> <li><a <li><a <li><a </ul> </li> class="imagen" href="#">Peridicos</a> href="http://www.lanacion.com.ar">La Nacin</A></li> href="http://www.clarin.com.ar">El Clarn</A></li> href="http://www.lavoz.com.ar">La Voz</a></li>

class="imagen" href="#">Lenguajes</a> href="http://www.php.net">PHP</a></li> href="http://www.rubyonrails.org">Ruby on rails</a></li> href="http://www.python.org">Python</a></li>

<li><a href="http://www.msn.com">MSN</a></li> </ul> </div> </body>

Estilos.css
#menu { font-family: Arial; margin:0px; padding:0px; } #menu ul { margin:0px; padding:0px; list-style-type:none; }

#menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center; } .imagen { background-image:url(../triangulo.jpg); background-position:top left; background-repeat:no-repeat; } #menu a:link, #menu a:visited { color: #f00; text-decoration: none; } #menu a:hover { background-color: #369; color: #fff; } #menu li ul li a{ display: block; padding: 3px; width: 160px; background-color: #ffa; border-bottom: 1px solid #eee; text-align:center; } ul li ul a:link, ul li ul a:visited { color: #000; text-decoration: none; } ul li ul a:hover { background-color: #369; color: #fff; }

Funciones.js
$(document).ready(function() { $("#menu").children().children("li").each(function () { if ($(this).find("ul").size()!=0) $(this).find("ul").hide(); }); $("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) { if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show(); else $(this).parent().find("ul").hide(); } }) })

Obtenemos la referencia del elemento "ul" hijo del elemento con id=#menu, seguidamente obtenemos la referencia de todos los elementos "li" hijos que dependen directamente del "ul" e iteramos con el mtodo each:
$("#menu").children().children("li").each(function () {

Dentro de la funcin de iteracin obtenemos la referencia de todos los elementos "ul" que tienen elementos hijo (es decir submen) y procedemos a ocultar dichos "ul":
if ($(this).find("ul").size()!=0) $(this).find("ul").hide();

Cuando se hace click sobre algn elemento "a", verificamos si el elemento padre tiene elementos "ul" y procedemos a ocultar o mostrar el submen segn el valor de la propiedad display:
$("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) { if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show(); else $(this).parent().find("ul").hide(); } })

Efectos y Mtodos
<script src="http://code.jquery.com/jquery-1.4.4.min.js></script> <script type=text/javascript> --- Esta dentro del html no es un .js $(document).ready(function(){ $(a).click(function(){ $(div).hide(fast); $(div).show(fast); $(div).slideup(fast); $(div).slidedown(fast); $(div).fadeOut(30000); ------Se desvanece $(div).fadeIn(10000); $(div).animate((width:150, height:500, top:100),slow); }); }); </script> </head> <body> <div style=width:300px; height:300px; background: yellow;> </div> <a href=#>Aplicar Efectos</a>

REPASO RAPIDO DE JQUERY Por poner un ejemplo digamos se tiene el siguiente campo de texto:
<input id="campo1" name="campo1" type="text" value="Campo txt " />

Para seleccionar el valor de este campo con Javascript seria de la siguiente forma:
1 //Mediante su id 2 3 document.getElementById("campo1").value();

Esto mismo con JQuery lo hariamos de la siguiente manera:


1 //Mediante su id 2 3 $('#campo1').text();

Existen muchas otras formas de seleccionar un objeto:


5 6 7 8 9 10 11 12 13 14 15 //Todos los objetos de una misma clase $(" .nombreDeLaClase") //Todos los div de la clase .noticias $("div .noticas") //Todos los link $("a")

Tambin podemos manejar todos los eventos tales como: click, onmouseover, blur, etc . Se podra decir que el ms importante que vamos a usar es el evento ready. El evento ready sirve para ejecutar una funcin cuando termine de cargar el DOM de la pgina, tal y como hace su homlogo window.onload= en Javascript. La nica diferencia es que mientras en Javascript solo podemos llamar a este evento para una sola funcin , con JQuery podremos ejecutar todas las funciones que queramos.

EJEMPLO La forma es la siguiente:


$(document).ready(function () {...funciones... });

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(document).ready(function () { $("#link_color").click( function(){ $("#div_colores").css("background-color","red"); }); } ); <input type="button" value="Cambiar a rojo" id="link_color"> <div id="div_colores" style="width: 50px; height: 50px; backgroundcolor: #191919;"> </div>

Ahora por ejemplo si quisieras crear un botn que alterne dos colores podramos usar la funcin toggle de la siguiente manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(document).ready(function () { $("#link_color").toggle( function(){ $("#div_colores").css("background-color","red"); }, function(){ $("#div_colores").css("background-color","green"); } ); } ); <input type="button" value="Cambiar color" id="link_color2"> <div id="div_colores" style="width: 50px; height: 50px; backgroundcolor: #191919;"></div>

La funcin toggle varia entre 2 colores verde o rojo al hundir el botn.

Agregando jQuerys de otros a la pgina Plugin de maskara para Inputs Primero descargar el ltimo jQuery de la pgina oficial y tambin descargar la librera o el plugin que se necesita como por ejemplo el de la maskara. Segundo incluir las libreras en el archivo a trabajar.

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>

Luego, llamar a las funciones de la maskara para esos tems que deseas:
jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); });

Colocando un Slider en tu Web Primer paso descargar los archivos .js: El plugin de jQuery y el de easyslider1.7 Segundo incluir estos archivos .js en el archivo principal index.html con su ruta adecuada. Los archivos .js no hay que tocarlos lo nico ser llamarlos desde el html

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script>

Indicamos con $(#slider).easySlider({ que busque cualquier elemento con el id de slider y aplique el script easySlider de forma automtica en el inicio y sea continuo (auto: true y continuos:true).

En el cdigo HTML:
<div id="slider"> <ul> <li><a href="http://interacciondigital.net/"><img src="imgs/01.jpg" alt="Interaccion Digital.net" /></a></li> <li><a href="http://interacciondigital.net/"><img src="imgs/02.jpg" alt="Interaccion Digital.net" /></a></li> <li><a href="http://interacciondigital.net/tutoriales/como-pasarde-psd-a-html-css-paso-a-paso/"><img src="imgs/03.jpg" alt="Interaccion Digital.net" /></a></li> </ul> </div>

Como pueden ver es slo un div con el id de slider que dentro contiene una lista de 3 elementos. Luego con el archivo css le dan el retoque final, cambiando las rutas de las imgenes y sus nombres correspondientes y analizar muy bien las propiedades CSS.

También podría gustarte