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

Aplicar estilos CSS a un HTML

2 opciones:

1. En el código HTML:

Aplicar un estilo concreto a una etiqueta:

        <tag style=”opcion que queramos;”> </tag>

Por ejemplo:   <p style=”color:#F3F3F3;”>Este párrafo</p>

  ————————————————————————————————————-

Simular un trozo de .css dentro del html:

<STYLE type=”text/css”>

                   H1 {border-width: 1px; border: solid; text-align: center}

</STYLE>

Como vemos se parece mucho a lo que se pone en un archivo .css, se aplicará a todas las entidades “h1″ las propiedades de “border-width”, “border” y “text-align”.

*En este segundo caso, las etiquetas STYLE deben ir en la sección Head del HTML.

2. En el código CSS:

Requiere linkearlo desde el html

<link rel=”stylesheet” type=”text/css” href=”larutadelcss” />

En estos archivos que escribe la etiqueta a aplicar, y dentro de las llaves los atributos que quieras, cada fin de atributo está marcado por “;”

 H1 {

              border-width: 1px;

              border: solid;

              text-align: center;

         }

Como vemos hemos usado el mismo ejemplo anterior, que hará no mismo, pero sin ensuciar el HTML.

Plantilla HTML y CSS

Archivo HTML:

<html>
<head>
<!– Título de pestaña –>
<title>title</title>
<!– Hoja de estilos –>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
<!– Codificación de caracteres –>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<!– Contenedor –>
<div id=”wrapper”>
<!– Cabecera –>
<div id=”header”>
</div>
<!– Menu Adicional –>
<div id=”menu”>
</div>
<!– Contenido Principal –>
<div id=”content”>
</div>
<!– Pie de página –>
<div id=”footer”>
</div>
</div>
</body>
</html>

Archivo CSS:

body{
}

#wrapper {
}

#header {
}

#menu {
}

#content {
}

#footer {
}