simples.jpg

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

PLAIN TEXT
HTML:
<ul class="ppt">
    <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

PLAIN TEXT
CSS:
ul.ppt {
    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;
}