Galeria de imagenes

por AllwaysLearning Mar Dic 15, 2015 9:28 am

Expongo lo que hace mi codigo Idea

Esto es una galeria de imagenes que funciona perfectamente.
tiene 3 funciones. ( boton atras, boton adelante , cambiar 'esta me pone la imagen pequeña en el area grande').

EXPONGO EL PROBLEMA Question

quiero que la imagen pequeña que se corresponde con la grande se muestre con opacidad
algo como un marcador que me indique que foto se esta mostrando.

Espero que podais ayudarme. muchas gracias Razz

Código:: <!DOCTYPE html> <html> <head> <title>GALERIA DE IMAGENES</title> <script> //declaracion de variables var Fotos; var v_max; var aux; //iniciacion de variables Fotos = new Array(); aux = 0; Fotos [0] = "1.jpg" Fotos [1] = "2.jpg" Fotos [2] = "3.jpg" Fotos [3] = "4.jpg" Fotos [4] = "5.jpg" Fotos [5] = "6.jpg" v_max = Fotos.length -1; function siguiente(){ if (aux == v_max){ aux = 0; } else{ aux = aux+1; } document.images.Diapositiva.src = Fotos[aux]; } function anterior(){ if (aux == 0){ aux = v_max; } else{ aux = aux-1; } document.images.Diapositiva.src = Fotos[aux]; } function cambio(z){ if (aux == z){ document.images.Diapositiva.src = Fotos[z]; } else{ aux=z document.images.Diapositiva.src = Fotos[z]; } } </script> <style type="text/css"> .peque img{ width: 150px; height: 150px; padding: 5px;} .boton {height: 50px; padding-top: 100px; padding-bottom: 150px;} .frontal {width: 300px; height: 300px; padding-top: 100px; padding-bottom: 25px;} </style> </head> <body> <center> <div > <img class="boton" src="arrow_left.gif" onclick="anterior()"/> <img class="frontal" src="1.jpg" name="Diapositiva"/> <img class="boton" src="arrow.gif" onclick="siguiente()"/> </div> <div class="peque"> <img src="1.jpg" onclick="cambio(0)" /> <img src="2.jpg" onclick="cambio(1)" /> <img src="3.jpg" onclick="cambio(2)" /> <img src="4.jpg" onclick="cambio(3)" /> <img src="5.jpg" onclick="cambio(4)" /> <img src="6.jpg" onclick="cambio(5)" /> </div> </center> </body> </html>