29/03/2012, 07:48
|
 | | | Fecha de Ingreso: octubre-2011
Mensajes: 27
Antigüedad: 13 años Puntos: 1 | |
| Slider
Hola a todos.
Estoy queriendo hacer un slider con jquery, pero no se por donde empezar, el que hice funciona bien pero quisiera mejorarlo. Por ejemplo no cambia automáticamente y solo funciona con 3 contenidos ya sea imágenes o texto. Les dejo el código completo para que lo vean y me puedan ayudar con eso.
Gracias.
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".capa3, .capa2").hide();
$("#capa1").addClass('activa');
$("#capa1").click(function(evento){
$("ul.lista li a").removeClass('activa');
$(this).addClass('activa');
$(".capa1").fadeIn("slow");
$(".capa2, .capa3").hide();
evento.preventDefault();
});
$("#capa2").click(function(evento){
$("ul.lista li a").removeClass('activa');
$(this).addClass('activa');
$(".capa2").fadeIn("slow");
$(".capa1, .capa3").hide();
evento.preventDefault();
});
$("#capa3").click(function(evento){
$("ul.lista li a").removeClass('activa');
$(this).addClass('activa');
$(".capa3").fadeIn("slow");
$(".capa1, .capa2").hide();
evento.preventDefault();
});
});
</script>
<style type="text/css">
body{
background-color:#333;
margin-top:5%;
}
p{
color:#FFF;
text-align:justify;
margin-left:10px;
margin-right:10px;
}
.nofloat{
clear:both;
}
.contenedor{
width:600px;
margin:auto;
background-color:#222;
border-radius:8px;
}
ul.lista{
float:right;
list-style: none;
}
ul.lista li{
display: inline;
}
ul.lista li a, ul.lista li a:visited {
display: block;
float: left;
background-color:#333;
padding: 4px 4px;
margin-right: 5px;
text-decoration: none;
border-radius:5px;
width:15px;
height:15px;
}
ul.lista li a:hover, ul.lista li a:visited:hover {
background-color:#4082ae;
}
ul.lista li a.activa {
background-color:#4082ae;
}
.capa1, .capa2, .capa3{
height:180px;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="capa1">
<table width="98%" align="center">
<tr>
<td><img src="http://s19.postimage.org/yf2uk92df/jquery.png" width="156" height="156" alt="jqeruy" /></td>
<td><p>jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web
debería de conocer. El propósito de este libro es proveer un resumen de la biblioteca, de tal forma
que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y
tendrá una sólida base para continuar el aprendizaje. El libro fue diseñado para ser utilizado como
material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.</p></td>
</tr>
</table>
</div><div class="nofloat"></div>
<div class="capa2">
<table width="98%" align="center">
<tr>
<td><img src="http://s19.postimage.org/fb9j3wpj7/php.png" width="156" height="100" alt="jqeruy" /></td>
<td><p>PHP, acrónimo de "PHP: Hypertext Preprocessor", es un lenguaje "Open Source"
interpretado de alto nivel, especialmente pensado para desarrollos web y el cual puede
ser embebido en páginas HTML. La mayoría de su sintaxis es similar a C, Java y Perl y
es fácil de aprender. La meta de este lenguaje es permitir escribir a los creadores de
páginas web, páginas dinámicas de una manera rápida y fácil, aunque se pueda hacer
mucho más con PHP.</p></td>
</tr>
</table>
</div><div class="nofloat"></div>
<div class="capa3">
<table width="98%" align="center">
<tr>
<td width="27%" align="center"><img src="http://s19.postimage.org/5ba1a9ow3/java.png" width="80" height="156" alt="jqeruy" /></td>
<td width="73%"><p>Al lenguaje de programación Java se le ha llamado "C++ para Internet", y
aunque hay algo de verdad en eso, Internet no es el único lugar en el que
actualmente se encuentra Java. Cada vez hay más empresas que utilizan el
lenguaje de programación Java para construir aplicaciones que no tienen
relación con Internet, pero que tienen que ser independientes de la plataforma.
He visto que muchas de las grandes corporaciones han cambiado gradualmente
su programación interna de C++ a Java.</p></td>
</tr>
</table>
</div><div class="nofloat"></div>
<ul class="lista">
<li><a href="javascript:void(null)" id="capa1"></a></li>
<li><a href="javascript:void(null)" id="capa2"></a></li>
<li><a href="javascript:void(null)" id="capa3"></a></li>
</ul>
<div class="nofloat"></div>
</div>
</body>
</html>
|