Programación Web y Scripting > JavaScript
simple pase de imagenes con JS
(1/1)
cesand:
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:
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;
Navegación
Ir a la versión completa