Skip to main content
2 de 2
Solo he arreglado el titulo, el título anterior tenia algunas fallas

Escoger una imagen aleatoria dentro de una galería con JQuery

Me gustaría hacer una galería simple, con tres imágenes, y que el usuario al hacer click en un botón aparezca una de las tres imágenes al azar. Podríais decirme que es lo que tengo mal en mi código, y el motivo por el cual no funciona?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>Page Title</title>
        <script>
            $(document).ready(function(){
                var galeria="";


                function inicio() {
                galeria = document.querySelectorAll("img")
                ocultar();
                galeria[0].style.display = "block";

                }

                function ocultar(){
                    $(galeria).each(function(element){
                    element.style.display="none";
                    });
                }

                function imagenRandom(){
                    var aleatorio=Math.round(Math.random()*4);
                   

                    if($(galeria[0])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }
                   if($(galeria[1])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }
                    if($(galeria[2])==$(galeria[aleatorio])){
                        $(galeria[aleatorio]).style.display = "block"

                    }else{
                        $(galeria[aleatorio]).style.display = "none"
                    }    
               } 
            });
        </script>
    </head>
    <body onload="inicio()">
        <center>
            <div>
                <h1>Galeria de imágenes</h1>
            </div>
           
                <img src="img/dembele.jpg" alt="">
                <img src="img/iniesta.jpg" alt="">
                <img src="img/messi.jpeg" alt="">

            <input type="button" onclick="imagenRandom()" id="verImagen" value="Ver aleatorio" >
        </center>
    </body>