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

cesand · « **en:** Sábado 19 de Marzo de 2011, 05:08 »

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 · « **Respuesta #1 en:** Lunes 21 de Marzo de 2011, 15:34 »

Aqui tienes un ejemplo:

Código: Text

<!DOCTYPE html>
<html>
    <head>
        <style>
            img#imgPlaceHolder {
                display: block;
                border: 1px solid #fefefe;
            }
            
            span#backBtn, span#nextBtn {
                display: inline-block;
                font: 13px Georgia;
                padding: 4px 6px;
                background: #3f7fb0;
                cursor: pointer;
                margin: 2px 2px 0 2px;
                color: #fefefe;
                border-bottom: 1px solid #ccc;
            }
            span#backBtn:hover, span#nextBtn:hover {
                color: #dae8f2
            }
        
        </style>
    </head>
    <body>
        <img id="imgPlaceHolder" src="image1.jpg">
        <span id="backBtn">Atras</span><span id="nextBtn">Siguiente</span>
    </body>
</html>
<script>
</script>
 

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

Código: Text

    /** el <img> elem */
    var imgPlaceHolder = document.getElementById( 'imgPlaceHolder' );
    /** un array que almacena las direcciones de las imagenes a paginar,
    que seran el attr "src" del <img> */
    var imagesSrc = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ];
    
    /** los botones "Atras" y "Siguiente" */
    var backBtn = document.getElementById( 'backBtn' );
    var nextBtn = document.getElementById( 'nextBtn' );
    /** para saber si tengo que avanzar o retroceder */
    backBtn.direction = 'back';
    nextBtn.direction = 'next';
 
    /** un indice que utilizare para saber que posicion del array
    imagesSrc debo llamar */
    var curPosition = 0;
    
    /** esta es la function que se encarga de hacer la paginacion */
    var doPagination = function( e ) {
    
        /** hice click en "Atras" */
        if( this.direction === 'back' ) {
            /** debo retroceder un lugar en el array */
            curPosition -= 1;
            /** retrocedi demasiado, voy al final del array */
            if( curPosition < 0 ) {
                curPosition = imagesSrc.length - 1;
            }
        /** hice click en "Siguiente" */
        } else if( this.direction === 'next' ) {
            /** avanzo una posicion en el array */
            curPosition += 1;
            /** avance demasiado, debo volver al comienzo del array */
            if( curPosition === imagesSrc.length ) {
                curPosition = 0;
            }
        }
        
        /** ya obtenida la posicion del array simplemente debo
        cambiar el attr "src" del <img> */
        imgPlaceHolder.src = imagesSrc[curPosition];
    
    };
    
    /** vinculo con el evento "click" los botones con la function "doPagination" */
    backBtn.onclick = doPagination;
    nextBtn.onclick = doPagination;
 

SoloCodigo

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

cesand

simple pase de imagenes con JS

fonsi3

Re: simple pase de imagenes con JS