Slider Sencillo y rápido

Aquí os pongo cómo hacer un slider sencillo y rápido de imágenes, cada elemento li mostrará una imagen, y el javascript + css se encargarán de mostrar sólo uno cada cierto tiempo.



HTML  **Se pueden agregar links (p.ej. <li><a><img> en vez de <li><img>) u otras etiquetas siempre que se modifique el css correctamente.

<ul id="galeria">
    <li><img src="img/imagen-1.jpg" border="0" alt="otros" /></li>
    <li><img src="img/imagen-2.jpg" border="0" alt="paisaje" /></li>
    <li><img src="img/imagen-3.jpg" border="0" alt="vistas" /></li>
    ...
</ul>

JAVASCRIPT **Copiar este código en la etiqueta head del HTML

<script type="text/javascript">
    /** javascript slide-show **/
    var cons = 1;
    function slide_show()
    {
      var elemento = document.getElementById('galeria').getElementsByTagName('li');
      for(var n=cons; n <= elemento.length; n++)
      {
         elemento[n].className = 'selected';
         for(var i = 0; i<elemento.length; i++)
         {
           if(i!=cons){ elemento[i].className = 'noselected'; }
         }
         cons++;
         break;
      }
      if(cons >= elemento.length){ cons = 0; }
      return false;
    }
    window.onload = function(){ setInterval(slide_show, 5000); } /** Valor en milisegs. de tiempo de exposición de una imagen **/

</script>

CSS, EFECTO OPACIDAD (Cambio de imágenes mediante superposición de opacidad)

/** galeria **/
#galeria{display: block; margin: 0 0 0 15em; padding: 0; position: relative; width: 50%;height: 22.5em; list-style: none; border: 10px solid #1a1a1a; border-radius: 10px; box-shadow: 0 0 10px #000; overflow: hidden;}
#galeria li{position: absolute; top: 0; left: 0; width: 100%;border-radius: 10px;background-color:#1a1a1a;paddiing: .4em;}
#galeria li img{width: 100%;border-radius: 10px;background: #1a1a1a;}
#galeria .selected{z-index: 1; opacity: 1; -moz-transition: all 2s ease 0s;-ms-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-webkit-transition: all 2s ease 0s;transition: all 2s ease 0s;}
#galeria .noselected{z-index: 0; opacity: 0; -moz-transition: all 2s ease 0s;-ms-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-webkit-transition: all 2s ease 0s;transition: all 2s ease 0s;}

CSS, EFECTO PERSIANA (Tal y como suena, la imagen se retira de abajo a arriba)

/** galeria **/
#galeria{display: block; margin: 0 0 0 15em; padding: 0; position: relative; width: 50%;height: 22.5em; list-style: none; border: 10px solid #1a1a1a; border-radius: 10px; box-shadow: 0 0 10px #000; overflow: hidden;margin-top: 1em;}
#galeria li{position: absolute; top: 0; left: 0; width: 100%;overflow:hidden;}
#galeria li img{width: 100%;}
#galeria .selected{height: 22.5em; z-index: 1; -moz-transition: all 1s ease 0s;-webkit-transition: all 1s ease 0s;-o-transition: all 1s ease 0s;-ms-transition: all 1s ease 0s;transition: all 1s ease 0s;}
#galeria .noselected{height: 0; z-index: auto; -moz-transition: all 0s ease 1s;-webkit-transition: all 0s ease 1s;-o-transition: all 0s ease 1s;-ms-transition: all 0s ease 1s;transition: all 0s ease 1s;}

Este slider fué creado por Andrés Moreno.

Fuente: http://www.andresmorenostudio.com/blog/javascript/30-slideshow-css-javascript