Simple Slideshow, otra opción que les permitirá montar sus Slideshow o diapositivas animadas de la forma más simple. Si deseas animar sus encabezados, pero no les agrada la idea de utilizar animaciones en flash, Simple Slideshow puede ser una buena opción a tener en cuenta.
Ver Demo - Descarga - Mas Info Simple Slideshow
Creando Nuestros slideshow
<li><img src="Foto1.jpg" alt="Descripcion 1"></img></li>
<li><img src="Foto2.jpg" alt="Descripcion 2"></img></li>
<li><img src="Foto3.jpg" alt="Descripcion 3"></img></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} );
</script>
Añadir estilo
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
Loading ...
German
21-03-2009
Permalink
Hola, me ha gustado mucho esta presentación de imágenes. Pero estoy teniendo un problema. Con las "position absolute" y "relative" de css, no se me queda bien centrado. A parte en firefox mas o menos se ve bien. Pero en internet explorer se me va la imagen a otra parte.
Gracias.
A ver si alguien me puede echar una mano.