/** 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;