Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje19-04-2009, 14:04 (UTC)    
Título del mensaje: [Código Javascript] Imagen Scroll!!

Fuente: www.hotscripts.com
Autor: Chris Coyier
Vista Previa:

Texto Por Encima De La Pagina

Código:
<link rel="stylesheet" href="http://img24.xooimage.com/files/9/5/6/style-da5181.css" type="text/css" media="screen" charset="utf-8">

   <script src="http://img45.xooimage.com/files/5/d/4/jquery-1.3.1.min-ab06a9.js" type="text/javascript" charset="utf-8"></script>
   <script src="http://img46.xooimage.com/files/4/f/6/slider-da5189.js" type="text/javascript" charset="utf-8"></script>


Codigo Del Scroll.. Ponganlo Donde quiean que valla el scroll

Código:
<div id="wrapper">
   
      <img src="http://img22.xooimage.com/files/5/8/1/movingboxes-da51a0.png" alt="moving boxes" />
   
        <div id="slider">   

            <img class="scrollButtons left" src="http://img26.xooimage.com/files/5/b/5/leftarrow-da51af.png">

         <div style="overflow: hidden;" class="scroll">
   
            <div class="scrollContainer">
   
                   <div class="panel" id="panel_1">
                  <div class="inside">
                     <img src="http://img22.xooimage.com/files/5/2/d/1-da51d6.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>

                   <div class="panel" id="panel_2">
                  <div class="inside">
                     <img src="http://img26.xooimage.com/files/0/1/9/2-da51de.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>
            
                   <div class="panel" id="panel_3">
                  <div class="inside">
                     <img src="http://img28.xooimage.com/files/0/8/f/3-da51ea.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>
               
               <div class="panel" id="panel_4">
                  <div class="inside">
                     <img src="http://img26.xooimage.com/files/e/5/d/4-da51f3.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>
               
               <div class="panel" id="panel_5">
                  <div class="inside">
                     <img src="http://img20.xooimage.com/files/a/0/b/5-da51fb.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>
               <div class="panel" id="panel_6">
                  <div class="inside">
                     <img src="http://img20.xooimage.com/files/a/0/b/5-da51fb.jpg" alt="picture" />
                     <h2>Titulo</h2>
                     <p>Descripción <a href="#">link</a></p>
                  </div>
               </div>
            
                </div>

            <div id="left-shadow"></div>
            <div id="right-shadow"></div>

            </div>

         <img class="scrollButtons right" src="http://img40.xooimage.com/files/e/7/a/rightarrow-da51bf.png">

        </div>
       
    </div>


Explicacion:

Para Agregar Otra Imagen. Usan El Siguiente codigo
Cita:
<div class="panel" id="panel_6">
<div class="inside">
<img src="http://img20.xooimage.com/files/a/0/b/5-da51fb.jpg" alt="picture" />
<h2>Titulo</h2>
<p>Descripción <a href="#">link</a></p>
</div>
</div>


Cambiamos:

id="panel_numero"
EL <img src="Aqui URL DE LA IMAGEN" alt="picture" />
<h2>Titulo</h2>
<p>Descripción <a href="#">link</a></p>

Quedando Algo asi.

Cita:
<div class="panel" id="panel_7">
<div class="inside">
<img src="URL IMAGEN" alt="picture" />
<h2>Tu Titulo</h2>
<p>Tu Descripción <a href="#">link</a></p>
</div>
</div>


OJO: Este Codigo Tiene que ir dentro de <div class="scrollContainer">

Explicacíon By: LifexD

¿El código no funciona?, comunícaselo a un Moderador CLICK AQUÍ
______________


Ultima edición por codeslife el Sab May 16, 2009 6:21 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group