Tema: Hacer galeria en rows que se mueva
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 17/03/2013, 02:31
Avatar de ArturoGallegos
ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 17 años
Puntos: 1146
Respuesta: Hacer galeria en rows que se mueva
es algo simple de hacer, casi cualquier slideshow lo puedes personalizar para esto.

slideshow cycle es uno de los que mas me gustan con la versión 1 tendrás te dejo ejemplo practico ya te tocara visitar la documentación para complementarlo y llegar al resultado deseado.

aquí puedes ver la documentación -> clic aquí

Ejemplo

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.     <meta name="author" content="Arturo Gallegos" />
  6.     <link href="styles.css" rel="stylesheet" type="text/css" />
  7.     <title>Sin título 1</title>
  8.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.     <script src="http://malsup.github.com/jquery.cycle.all.js"></script>
  10. </head>
  11. <body>
  12.  
  13. <ul class="slide">
  14.     <li>
  15.         <ul>
  16.             <li><img src="img1.jpg" /></li>
  17.             <li><img src="img1.jpg" /></li>
  18.             <li><img src="img1.jpg" /></li>
  19.             <li><img src="img1.jpg" /></li>
  20.             <li><img src="img1.jpg" /></li>
  21.             <li><img src="img1.jpg" /></li>
  22.         </ul>
  23.     </li>
  24.     <li>
  25.         <ul>
  26.             <li><img src="img1.jpg" /></li>
  27.             <li><img src="img1.jpg" /></li>
  28.             <li><img src="img1.jpg" /></li>
  29.             <li><img src="img1.jpg" /></li>
  30.             <li><img src="img1.jpg" /></li>
  31.             <li><img src="img1.jpg" /></li>
  32.         </ul>
  33.     </li>
  34.     <li>
  35.         <ul>
  36.             <li><img src="img1.jpg" /></li>
  37.             <li><img src="img1.jpg" /></li>
  38.             <li><img src="img1.jpg" /></li>
  39.             <li><img src="img1.jpg" /></li>
  40.             <li><img src="img1.jpg" /></li>
  41.             <li><img src="img1.jpg" /></li>
  42.         </ul>
  43.     </li>
  44.     <li>
  45.         <ul>
  46.             <li><img src="img1.jpg" /></li>
  47.             <li><img src="img1.jpg" /></li>
  48.             <li><img src="img1.jpg" /></li>
  49.             <li><img src="img1.jpg" /></li>
  50.             <li><img src="img1.jpg" /></li>
  51.             <li><img src="img1.jpg" /></li>
  52.         </ul>
  53.     </li>
  54. </ul>
  55. <script type="text/javascript">
  56. <!--
  57.     $('.slide').cycle({
  58.     fx:    'curtainX',
  59.     sync:  false,
  60.     delay: -2000
  61.  });
  62. -->
  63. </script>
  64.  
  65. </body>
  66. </html>
Código CSS: 
Ver original
  1. @charset "UTF-8";
  2. .slide{width:500px;height:265px;margin:15px auto;padding:0;border:1px #ccc solid;overflow:hidden;}
  3. .slide>li{margin:0;overflow: hidden;height:265px;}
  4. .slide ul{margin:0;padding:0;}
  5. .slide ul li{margin:7px;float:left;border:1px #ccc solid;list-style:none;}
  6. .slide ul img{width:150px;}