Tema: Tener una sección dinamica
Ver Mensaje Individual
  #15 (permalink)  
Antiguo 06/05/2011, 01:18
sirdaiz
 
Fecha de Ingreso: diciembre-2010
Mensajes: 459
Antigüedad: 13 años, 11 meses
Puntos: 21
Respuesta: Tener una sección dinamica
Bueno os voy a poner el codigo de Pablo e Inkarc, de los cuales los 2 me funcionan perfectamente por si a alguien le sirve

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.       <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5.             <head>
  6.   
  7.               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  8.  
  9.      <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
  10.  
  11.             <style type="text/css">
  12.  
  13.             #special_slider ul,
  14.  
  15.             #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  16.  
  17.             #special_slider,
  18.  
  19.             #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
  20.  
  21.             </style>
  22.  
  23.             <script type="text/javascript">
  24.  
  25.             $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  26.   
  27.             special_slider.init("special_slider");});
  28.  
  29.             </script>
  30.  
  31.             </head>
  32.  
  33.             <body>
  34.   
  35.             <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
  36.  
  37.               <div class="block_content">
  38.  
  39.                   <div  id="special_slider">
  40.  
  41.                     <ul style="">
  42.  
  43.                           <li style="padding: 3px 0px 3px 0px;">
  44.  
  45.                               <div class="price-discount">Hola el precio final es:200,00 €</div>  
  46.  
  47.                           </li>
  48.   
  49.                           <li style="padding: 3px 0px 3px 0px;">
  50.   
  51.                               <div class="price-discount">Hola el precio inicial es:155,00 €</div>                    
  52.  
  53.                           </li>
  54.  
  55.                             <li style="padding: 3px 0px 3px 0px;">
  56.                               <div class="price-discount">Hola el medio es:185,00 €</div>      
  57.  
  58.                           </li>
  59.  
  60.                       </ul>
  61.  
  62.                    </div>
  63.  
  64.                 </div>
  65.  
  66.             </div>
  67.   
  68.             </body>
  69.   
  70.             </html>


y el de Inkarc

Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  5.  
  6.  <style type="text/css">
  7. #contenedor, .cuadro {
  8.     margin:0;
  9.     padding:0;
  10. }
  11.  
  12. #contenedor {
  13.     width:300px;
  14.     height:300px;
  15.     overflow:hidden;
  16. }
  17.  
  18. .cuadro {
  19.     width:100%;
  20.     height:100%;
  21.     font-family:Arial, Helvetica, sans-serif;
  22.     overflow:hidden;        
  23. }
  24.  </style>
  25.  
  26.             <script type="text/javascript">
  27.             
  28.             setInterval(function(){
  29. var moverse =  $("#contenedor").height() * -1 //Cuanto se tiene que mover cada cuadro, o sea el alto del #contenedor multiplicado por -1 (para que se mueva para arriba)
  30.  
  31.     $("#contenedor .cuadro:first").animate(
  32.         {"margin-top":moverse},  //que el margin-top sea el valor dado
  33.         300, // lo que dura la animacion en milisegundos = 0.3 segundos
  34.         function(){ // La funcion que se ejecuta cuando termina de animarse
  35.         $(this).css("margin-top",0).appendTo($(this).parent())})  // Que el margin-top vuelva a 0 al terminarse y que lo coloca al final del padre
  36.  
  37. },3000)
  38.  
  39. </script>
  40.  
  41. </head>
  42. <body>
  43. <div id="contenedor">
  44. <div class="cuadro" style="background-color:#F90">Contenido total</div>
  45. <div class="cuadro" style="background-color:#CCC">Contenido total</div>
  46. <div class="cuadro" style="background-color:#9C0">Contenido total</div>
  47. <div class="cuadro" style="background-color:#FC0">Contenido total</div>
  48. </div>
  49. </body>
  50. </html>


La única cuestión es que si algun dai la pagina donde aparece este codigo deja de funcionar,supongo que tampoco funcionaria la sección dinamica

Código HTML: 
Ver original
  1. <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
Podria obtener la libreria olcSlider de otra forma?,es decir susituir ese codigo,especialmente www.especializadosenaviarios ya q no es pagina mia ni nada


Gracias nuevamente por vuestra ayuda

Saludos