• Sábado 15 de Mayo de 2021, 00:47

Autor Tema:  simple pase de imagenes con JS  (Leído 1920 veces)

cesand

  • Miembro MUY activo
  • ***
  • Mensajes: 127
    • Ver Perfil
simple pase de imagenes con JS
« en: Sábado 19 de Marzo de 2011, 05:08 »
0
Hola gente como estan todos?
vengo con el fin de pedirles una ayuda con una cosa que no me doy idea.. :( Les comento quiero hacer un pase o "paginado" de imagenes podria llamarse pero con JS..

la idea es simple tener una imagen relativamente grande como banner de mi web y al costado hacerle dos botones que no van hacer mas que dos <a href="javascript:void(0)" onClick="">  <img src="" /> </a> y con esos botones cambiar la imagen de fondo del banner..

ven por que les decia un tipo de paginado con Js por que quiero poner 4 o  5 imagenes para cambiarlas con esos dos botones, sin ningun efecto adicional solo que al apretar uno de los botones cambie la imagen...

me podran dar un idea? como podria ser?

les dejo un gran saludo y gracias de antemano a los que me puedan dar una mano..

fonsi3

  • Miembro activo
  • **
  • Mensajes: 95
    • Ver Perfil
Re: simple pase de imagenes con JS
« Respuesta #1 en: Lunes 21 de Marzo de 2011, 15:34 »
0
Aqui tienes un ejemplo:

Código: Text
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <style>
  5.             img#imgPlaceHolder {
  6.                 display: block;
  7.                 border: 1px solid #fefefe;
  8.             }
  9.            
  10.             span#backBtn, span#nextBtn {
  11.                 display: inline-block;
  12.                 font: 13px Georgia;
  13.                 padding: 4px 6px;
  14.                 background: #3f7fb0;
  15.                 cursor: pointer;
  16.                 margin: 2px 2px 0 2px;
  17.                 color: #fefefe;
  18.                 border-bottom: 1px solid #ccc;
  19.             }
  20.             span#backBtn:hover, span#nextBtn:hover {
  21.                 color: #dae8f2
  22.             }
  23.        
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <img id="imgPlaceHolder" src="image1.jpg">
  28.         <span id="backBtn">Atras</span><span id="nextBtn">Siguiente</span>
  29.     </body>
  30. </html>
  31. <script>
  32. </script>
  33.  

Pega en <script></script> este codigo:

Código: Text
  1.     /** el <img> elem */
  2.     var imgPlaceHolder = document.getElementById( 'imgPlaceHolder' );
  3.     /** un array que almacena las direcciones de las imagenes a paginar,
  4.     que seran el attr "src" del <img> */
  5.     var imagesSrc = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ];
  6.    
  7.     /** los botones "Atras" y "Siguiente" */
  8.     var backBtn = document.getElementById( 'backBtn' );
  9.     var nextBtn = document.getElementById( 'nextBtn' );
  10.     /** para saber si tengo que avanzar o retroceder */
  11.     backBtn.direction = 'back';
  12.     nextBtn.direction = 'next';
  13.  
  14.     /** un indice que utilizare para saber que posicion del array
  15.     imagesSrc debo llamar */
  16.     var curPosition = 0;
  17.    
  18.     /** esta es la function que se encarga de hacer la paginacion */
  19.     var doPagination = function( e ) {
  20.    
  21.         /** hice click en "Atras" */
  22.         if( this.direction === 'back' ) {
  23.             /** debo retroceder un lugar en el array */
  24.             curPosition -= 1;
  25.             /** retrocedi demasiado, voy al final del array */
  26.             if( curPosition < 0 ) {
  27.                 curPosition = imagesSrc.length - 1;
  28.             }
  29.         /** hice click en "Siguiente" */
  30.         } else if( this.direction === 'next' ) {
  31.             /** avanzo una posicion en el array */
  32.             curPosition += 1;
  33.             /** avance demasiado, debo volver al comienzo del array */
  34.             if( curPosition === imagesSrc.length ) {
  35.                 curPosition = 0;
  36.             }
  37.         }
  38.        
  39.         /** ya obtenida la posicion del array simplemente debo
  40.         cambiar el attr "src" del <img> */
  41.         imgPlaceHolder.src = imagesSrc[curPosition];
  42.    
  43.     };
  44.    
  45.     /** vinculo con el evento "click" los botones con la function "doPagination" */
  46.     backBtn.onclick = doPagination;
  47.     nextBtn.onclick = doPagination;
  48.  
Cha che chi cho chu buenichimo!
http://mensoscripts.com

Links de interes: HTML | CCS2~CSS* | PHP
Indispensables tools]Firebug[/url] | Web Developer | FireFTP | Live Headers