Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: nevermind2403 en 13 Noviembre 2013, 05:09 am



Título: Slider Automatico Jquery (AYUDA)
Publicado por: nevermind2403 en 13 Noviembre 2013, 05:09 am
Hola a todos como estan? Tengo este codigo con jquery,tengo que agregar al pie del slider unos cuadraditos o circulos tipicos de los sliders,uno por cada imagen y que se vaya moviendo a medida que se cambia la imagen: es decir imagen1 y se muestre el cuadradito 1 y asi sucesivamente, he buscado muchisimos ejemplos pero no he encontrado uno puntual asi,si alguien sabe que codigo agregar  o algun ejemplo puntual, se lo agradezco

Aca esta el codigo completo para que pueden verlo,faltan solos las 3 imagenes y archivo jquery normal,saludos



Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  6. <script type="text/javascript">
  7.  
  8. $(document).ready(function(){
  9.  
  10. function animacion(){
  11. $("#texto3").slideDown(4000, function(){
  12. $("#texto3").css("display", "none")
  13. $("#texto2").slideDown(4000, function(){
  14. $("#texto2").css("display", "none")
  15. $("#texto1").slideDown(4000, function(){
  16. $("#texto1").css("display", "none")
  17.  
  18. })})});
  19.  
  20. $("#foto3").animate({"left": "+=600px"}, 4000, function(){
  21. $("#foto2").animate({"left": "+=600px"}, 4000, function(){
  22. $("#foto1").animate({"left": "+=600px"}, 4000, function(){
  23. $("#foto3").css("left", "0")
  24. $("#foto2").css("left", "0")
  25. $("#foto1").css("left", "0")
  26.  
  27. animacion();
  28. })})});
  29. }
  30. animacion();
  31.  
  32. });
  33. <style type="text/css">
  34. #imagenes{
  35. width: 600px;
  36. height: 450px;
  37. border: 1px solid grey;
  38. position: relative;
  39. overflow: hidden;
  40. background-image: url(foto1.jpg)
  41. }
  42. #foto1, #foto2, #foto3{
  43. display: block;
  44. position: absolute;
  45. }
  46. #texto1, #texto2, #texto3{
  47. display: none;
  48. position: absolute;
  49. text-align: center;
  50. width: 600px;
  51. height: 30px;
  52. padding-top: 10px;
  53. vertical-align: bottom;
  54. background-color: #000000;
  55. color: #FFFFFF;
  56. opacity: 0.3;
  57. filter: alpha(opacity=30);
  58. }
  59.  
  60. </head>
  61.  
  62. <h2>Slider</h2>
  63. <div id="imagenes">
  64.    <img src="foto3.jpg" id="foto1" />
  65.    <img src="foto2.jpg" id="foto2" />
  66.    <img src="foto1.jpg" id="foto3" />
  67.    <div id="texto1">Esta es la descripcion de la foto 1</div>
  68.    <div id="texto2">Esta es la descripcion de la foto 2</div>
  69.    <div id="texto3">Esta es la descripcion de la foto 3</div>
  70.  
  71. </div>
  72. </body>
  73. </html>