Tutoriales en la Web

Efecto slide con JQUERY

Posteado el 27. Jul, 2010 por Webi in Desarrollo Web, Jquery

AQUI PUEDES VER LO QUE APRENDERAS CON ESTE TUTORIAL

PASO 1
Creamos una carpeta la cual vamos a llamar slide con jquery en la cual vamos a colocar todos nuestros elementos, dentro de esta carpeta creamos una carpeta llamada imágenes en la cual vamos a colocar las imágenes que vamos a utilizar para nuestro slide y los botones de next y prev.

Efecto slide con JQUERY

PASO 2
Abrimos Dreamweaver y creamos un nuevo documento HTML en blanco.

Efecto slide con JQUERY

PASO 3
Con el comando ctrl. + S guardamos nuestro HTML con el nombre de slide.html en la carpeta slide con jquery que creamos anteriormente.

Efecto slide con JQUERY

PASO 4
Con el comando Ctrl + N creamos un nuevo documento CSS.

Efecto slide con JQUERY

PASO 5
Ahora con el comando ctrl. + S guardamos el documento en una carpeta llamada css y le colocamos el nombre de slide.css.

Efecto slide con JQUERY

PASO 6
Copiamos y pegamos el siguiente código dentro de nuestro archivo css

Code block

#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
width:500px;
height:500px;
overflow:hidden;
}
 
#slider2 li{
background:#f1f1f1;
}
#slider2 li h2{
margin:0 20px;
padding-top:20px;
}
#slider2 li p{
margin:20px;
}
 
p#controls, p#controls2{
margin:0;
position:relative;
}
 
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:-250px;
}
#nextBtn, #nextBtn2{
left:500px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:30px;
height:77px;
background-image: url(../imagenes/prev.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#nextBtn a, #nextBtn2 a{
background:url(../imagenes/next.gif) no-repeat 0 0;
}
 
img{border:none;}

Efecto slide con JQUERY

PASO 7
Dentro de la carpeta Slide con jquery creamos una nueva carpeta llamada js y copiamos los dos archivos js que adjunto en este tutorial.

Efecto slide con JQUERY

PASO 8
Ahora vamos a Dreamweaver y en nuestro documento HTML vamos a copiar el siguiente código por debajo de la etiqueta Slide con Jquery.

Efecto slide con JQUERY

PASO 9
Copiamos el siguiente código que enlaza nuestro documento HTML con el CSS

Efecto slide con JQUERY

PASO 10
Ahora vamos a insertar un DIV Nuevo vamos a la barra Insert – Pestaña Layout – Botón Insert Div Tag.

Efecto slide con JQUERY

PASO 11
En la ventana Insert Div Tag en la opción Class y ID: colocamos el nombre de contenido y luego damos click en el botón New CSS Style.

Efecto slide con JQUERY

PASO 12
En la ventana New CSS Rule en la opción Selector tiene que estar el nombre #contenido y en Define in: el nombre del css en este caso es slide.css, luego damos click en ok.

Efecto slide con JQUERY

PASO 13
Ahora en la ventana CSS Rule Definition vamos directo a la pestaña Box y agregamos los valores que se ven en la imagen y luego damos click en Ok.

Efecto slide con JQUERY

PASO 14
Luego nos aparecerá nuevamente la ventana Insert Div Tag y damos click en Ok.

Efecto slide con JQUERY

PASO 15
Nos aparecerá nuestro div marcado con una línea punteada como se ve en la imagen.

Efecto slide con JQUERY

PASO 16
Ahora dentro del Div contenido insertamos el siguiente código.

Code block

<div id="slider">
			<ul>
				<li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="500" height="500" /></a></li>
			  <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="500" height="500" /></a></li>
			  <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/3.jpg" alt="Tutoriales en la web" width="500" height="500" /></a></li>
			  <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/4.jpg" alt="Tutoriales en la web" width="500" height="500" /></a></li>
			  <li><a href="http://www.tutorialesenlaweb.com"><img src="imagenes/5.jpg" alt="Tutoriales en la web" width="500" height="500" /></a></li>
    </ul>
		</div>

Efecto slide con JQUERY

PASO 17
Listo ya tenemos nuestro slide terminado.

Efecto slide con JQUERY

DESCARGA EL EDITABLE DE Efecto slide con JQUERY

Articulos relacionados:

Tags: jQuery