REGALO para (NOVATOS como yo)
Hola como estas
Introducción:
Cuando recien comenzas, todo es y parece, complejo; hasta que comenzas a comprender como funciona y se comporta cada evento, atributo, función, etc. Por eso y para que no se te vaya un fin de semana entero haciendo esto aquí te lo dejo.
Este programa te permite ver una cadena de imagenes con un Scroll Horizontal A partir de este código podrás ir jugando para aplicar nuevos resultados que puedan mejorarlo.
Fuente de donde comencé este codigo--> http://jqueryui.com/slider/#side-scroll
Aplicaciones:
Un almacen de productos te muestra una linea (Hogar - Electro - Camping) y al seleccionar un tema
HOGAR por Ej. Es aqui donde mostraría los artículos ( plancha, ventilador, televisor, etc.)
Bueno vos seguramente verás como y en que usarlo. Lo que si hice ha sido modificarlo para que muestre imagenes (a distinto del original)
Te recomiendo (
a) Crear una carpeta (
b) Copies 20 imagenes dentro de la carpeta (
c) Crear un archivo index.html dentro de la carpeta con este contenido y espero que te sirva.
Código HTML:
<!doctype html>
<html lang="es">
<!-- Link de Origen: http://jqueryui.com/slider/#side-scroll -->
<!-- Galeria de imagenes -->
<head>
<meta charset="utf-8">
<title>Barra Horizontal de Guchi</title>
</head>
<body>
<style>
/* Barra Horizontal de Corrimiento */
.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20; height:140px; z-index:1; }
.borde-Panel {border: 1px solid RGB(0,0,0); background: RGB(215,201,168); }
.punta-Izq {border-top-left-radius: 5px;}
.punta-Der {border-top-right-radius: 5px;}
.barra-Scroll {width: 3630px;} /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
.contiene-Item {border: 1px solid RGB(0,0,0); width: 150px; height: 100px; float: left; margin: 10px;}
</style>
<div class="barra-panel borde-Panel punta-Izq punta-Der">
<div class="barra-Scroll">
<div class="contiene-Item"><img src='./img01.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img02.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img03.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img04.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img05.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img06.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img07.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img08.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img09.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img10.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img11.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img12.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img13.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img14.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img15.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img16.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img17.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img18.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img19.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img20.jpg' width="150px" height="100px"></div>
<div class="contiene-Item"><img src='./img21.jpg' width="150px" height="100px"></div>
</div>
</div>
</body>
<script>
</script>
</html>
Bien espero que te sirva!!! como a mí.