Lo primero de todo es incluir el fichero jquery.js, a continuación el codigo del movimiento:
<html> <head> <title>JQuery :: Carrusel</title> <script src="js/jquery.js"></script> <script> $(document).ready(function(){ var timer = setInterval( MoveCarrusel, 3000); function MoveCarrusel(){ var lifirst=$('#carrusel-container li:first'); lifirst.slideUp(700,function(){ $('#carrusel-container li:last').after(lifirst); lifirst.css({"display" : "block"}); }); } }) </script> </head> <body>
<style> #carrusel-container { width: 200px; height: 265px; border: 1px solid #CCC; background-color: #f0f0f0; overflow: hidden; font-family: Arial, Helvetica, sans-serif; } #carrusel-container ul { list-style:none; position: relative; margin: 0px; padding: 0px; } #carrusel-container li { margin: 5px; padding: 5px; background-color: #f9f9f9; position: relative; height: 50px; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; } </style>
<div id="carrusel-container"> <ul> <li> <p>El titulo1<br /> El cuerpo y mas...1111 1111 1111 1 111 1</p> </li> <li> <p>El titulo2<br /> El cuerpo y mas...22 22 2 2 22 2 2</p> </li> <li> <p>El titulo3<br /> El cuerpo y mas...33 33 33 33 3 </p> </li> <li> <p>El titulo4<br /> El cuerpo y mas...444 44 4 4 4444</p> </li> <li> <p>El titulo5<br /> El cuerpo y mas...555555555 55 55 555</p> </li> </ul> </div>
El resultado sería lo siguiente:
El titulo1
El curpo y mas...1111 1111 1111 1 111 1
El titulo2
El curpo y mas...22 22 2 2 22 2 2
El titulo3
El curpo y mas...33 33 33 33 3
El titulo4
El curpo y mas...444 44 4 4 4444
El titulo5
El curpo y mas...555555555 55 55 555
Puedes descargar el ejemplo completo desde aquí.
muy buen aporte!!!
ResponderEliminar