Tema: Desplazamiento Horizontal
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/01/2012, 22:22
Lanix_0
 
Fecha de Ingreso: noviembre-2010
Mensajes: 95
Antigüedad: 14 años
Puntos: 5
Respuesta: Desplazamiento Horizontal
Hola Foreros, ya encontre la solución, la verdad no se si sea la mas correcta pero me sirvió, y pues les comparto el código y dejo el link de descarga para que descargue en archivo completo, el código lo escribo tambien aqui, los efecto fueron con la ayuda de jquery.

este es el link del ejemplo funcionando espero les guste mi aporte saludos


*el ejemplo cumple con el requisito principal la funcion inicia,fin y es reutilizable - - puedes agregar mas divs siguiendo la numeracion asi tengas dos divs o tengas 1000 se reutiliza las funciones

http://www.megaupload.com/?d=MG8G6XAU


Empezemos con el HTML

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <link href="doc_css/index.css" rel="stylesheet"/>
  7.         <script src="doc_js/ui/js/jquery-1.6.2.min.js" type="text/javascript"></script>
  8.         <script src="doc_js/core.js" type="text/javascript"></script>
  9.         <title>New Web Project</title>
  10.     </head>
  11.     <body>
  12.         <div id="_header">
  13.             
  14.         </div>
  15.         <div id="_bodyContent" title="0">
  16.             <div id="content_0" class="contentStyle">
  17.                 div 1
  18.             </div>
  19.             <div id="content_1" class="contentStyle" style="left:150%;">
  20.                 div 2
  21.             </div>
  22.             <div id="content_2" class="contentStyle" style="left:150%;">
  23.                 div 3
  24.             </div>
  25.             <div id="content_3" class="contentStyle" style="left:150%;">
  26.                 div 4
  27.             </div>
  28.             <div id="content_4" class="contentStyle" style="left:150%;">
  29.                 div 5
  30.             </div>
  31.         </div>
  32.         <div id="btn_next">
  33.                 
  34.         </div>
  35.         <div id="btn_previous" style="visibility: hidden;">
  36.                 
  37.         </div>
  38.         <div id="_footer">
  39.             
  40.         </div>
  41.     </body>
  42. </html>

mandamos a llamar a dos archivos js el primero es el jquery que esta disponible desde la pagina de jquery y el segundo archivo es el que contiene las instrucciones para el carrusel.

core.js

Código Javascript: 
Ver original
  1. /**
  2.  * @author developerWCS 02-ene-2012
  3.  */
  4.  
  5. $(document).ready(function ()
  6.     {
  7.         $("#btn_next").click(function() //Cuando de click en el div de siguiente ejecutara lo siguiente
  8.         {
  9.             if ($("#_bodyContent").attr("title")>=$("#_bodyContent div").length) //preguntamos si el valor que tiene el atributo title es menor al numero de elementos hijo del div #_bodyContent
  10.             {
  11.                 $("#_bodyContent").attr("title",$("#_bodyContent div").length) //si la condicion se cumple asignamos el como valor el numero de hijos del div padre (#_bodyContent)
  12.                 //por que esta condicion ya que el atributo lo ocupamos como referencia para saber cuantas veces debe ser 
  13.                 //utilizado el carrusel, sin que nos mande un espacio en blanco
  14.             }
  15.             else //negacion
  16.             {
  17.                 divActual = $("#_bodyContent").attr("title")*1; //capturamos el valor del title del div y lo multiplicamos por 1 ya que si no lo multiplicamos el valor lo tomara como texto, esto para saber que div sigue
  18.                 $("#content_"+divActual).animate({left: ('-50%')},1000); //concatenamos el nombre previo del div con el numero de div actual y lo animamos para que vaya a -50% de la pantalla en horizontal
  19.                 $("#content_"+(divActual+1)).animate({left: ('50%')},1000); //lo mismo que el paso anterior solo que le aumentamos 1 a el div actual y lo animams para que se posiscione al 50% de la pantalla
  20.                 $("#_bodyContent").attr("title",($("#_bodyContent").attr("title") * 1)+1); // Actualizamos el valor del title con el actual mas 1, esto es como referencia para saber en que div estamos
  21.             }
  22.             if ($("#_bodyContent").attr("title")>=$("#_bodyContent div").length-1) //esta condicion es para saber si ocultamos el div de siguiente
  23.             {
  24.                 $("#btn_next").attr("style","visibility:hidden");
  25.             }
  26.             if ($("#_bodyContent").attr("title")>=0) // esta condicion es para saber si mostramos el div de previo (o atras)
  27.             {
  28.                 $("#btn_previous").attr("style","visibility:visible");
  29.             }
  30.         });
  31.         $("#btn_previous").click(function() //esta funcion es exactamente igual que la anterior pero con valores distintos solo cambio la posision a un 150 % horizontal
  32.         {
  33.             if ($("#_bodyContent").attr("title")<=1)
  34.             {
  35.                 $("#btn_previous").attr("style","visibility:hidden");
  36.             }
  37.             if ($("#_bodyContent").attr("title")>=1)
  38.             {
  39.                 $("#btn_next").attr("style","visibility:visible");
  40.             }
  41.             divActual = $("#_bodyContent").attr("title")*1;
  42.             $("#content_"+divActual).animate({left: ('150%')},1000);
  43.             $("#content_"+(divActual-1)).animate({left: ('50%')},1000);
  44.             $("#_bodyContent").attr("title",($("#_bodyContent").attr("title") * 1)-1);
  45.             
  46.         });
  47.     }
  48. );

y estilos css

Código CSS: 
Ver original
  1. /*
  2.  * 02 - Ene - 2012
  3.  * @developerWCS
  4.  */
  5.  
  6. /*****************
  7.  **** </> ********
  8.  *****************/
  9.  
  10. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, select, table, caption, tbody, tfoot, thead, tr, th, td {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15.     overflow:hidden;
  16. }
  17. /*****************
  18.  ******* # *******
  19.  *****************/
  20. #_header
  21. {
  22.     height: 55px;
  23.     background: #08519C;
  24. }
  25. #btn_next
  26. {
  27.     height: 120px;
  28.     width:50px;
  29.     z-index:10;
  30.     float:left;
  31.     position:absolute;
  32.     left:100%;
  33.     top:50%;
  34.     margin-top:-60px;
  35.     margin-left:-50px;
  36.     border:1px solid #BBBBBB;
  37.     background-image:url("../doc_img/_bkRows.png");
  38.     background-position:-50px;
  39.     -webkit-border-radius: 5px;
  40. }
  41. #btn_next:hover
  42. {
  43.     background:#EFEFEF;
  44.     background-image:url("../doc_img/_rows.png");
  45.     background-position:-50px;
  46. }
  47. #btn_previous
  48. {
  49.     height: 120px;
  50.     width:50px;
  51.     z-index:11;
  52.     float:left;
  53.     position:absolute;
  54.     left:0%;
  55.     top:50%;
  56.     margin-top:-60px;
  57.     border:1px solid #BBBBBB;
  58.     background-image:url("../doc_img/_bkRows.png");
  59.     -webkit-border-radius: 5px;
  60. }
  61. #btn_previous:hover
  62. {
  63.     background:#EFEFEF;
  64.     background-image:url("../doc_img/_rows.png");
  65. }
  66. #_bodyContent
  67. {
  68.     margin-top:150px;
  69. }
  70. /*****************
  71.  ******* . *******
  72.  *****************/
  73.  
  74. .contentStyle
  75. {
  76.     height:400px;
  77.     width:800px;
  78.     float:left;
  79.     left:50%;
  80.     margin-left:-400px;
  81.     position:absolute;
  82.     -webkit-border-radius: 10px;
  83.     background: #C6DBEF;
  84. }