Skip to main content
Mejoras, más comentarios y correcciones en el código
Origen Enlace
Ariel Montes
  • 2.4k
  • 1
  • 10
  • 30
<body>
    <script type="text/javascript">

        // Creación de los elementos html
        var boton1 = document.createElement("button");
            boton1.innerHTML = "<";
            boton1.style.width = "100px";
        var boton2 = document.createElement("button");
            boton2.innerHTML = ">";
            boton2.style.width = "100px";
        var br = document.createElement("br");
        var img = document.createElement("img");
            img.height = 100;
            img.width = 200;
        var Inum = 1;

        // Inserción de los elementos html
        document.body.appendChild(img);
        document.body.appendChild(br);
        document.body.appendChild(boton1);
        document.body.appendChild(boton2);
        
        // Cambiar imagen con las flechas del teclado
        document.onkeydown = checkKey;                
        function checkKey(e) { 

            // Compatibilidad con navegadores
            e = e || window.event;

            if (e.keyCode == '37') {
                // flecha izquierda
                if (Inum >= 2){Inum--;} // controla que Inum sea superior a 1 (img0 no existe)
                img.src = 'img/img'+Inum+'.png';
            }
            else if (e.keyCode == '39') {
                // flecha derecha
                Inum++;if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes (uso: si hay 10 img usar el número 9)
                img.src = 'img/img'+Inum+'.png';
            }
        }

        // Cambiar imagen con los botones
        boton1.onclick = function() {  
            img.src// =imagen 'img/img'+Inum+'.png';anterior
            if (Inum >= 2){Inum--;} // controla que Inum sea superior a 1
            img.src = 'img/img'+Inum+'.png';
        };
        boton2.onclick = function() {
            // imagen siguiente
            img.srcif =(Inum 'img<=2){Inum++} /img'+Inum+'.png';/ controla que Inum no sea superior al número de imagenes
            Inum++;img.src = 'img/img'+Inum+'.png';
        };

    </script>
</body>
<body>
    <script type="text/javascript">

        var boton1 = document.createElement("button");
            boton1.innerHTML = "<";
            boton1.style.width = "100px";
        var boton2 = document.createElement("button");
            boton2.innerHTML = ">";
            boton2.style.width = "100px";
        var br = document.createElement("br");
        var img = document.createElement("img");
            img.height = 100;
            img.width = 200;
        var Inum = 1;

        document.body.appendChild(img);
        document.body.appendChild(br);
        document.body.appendChild(boton1);
        document.body.appendChild(boton2);
        
        // Cambiar imagen con las flechas del teclado
        document.onkeydown = checkKey;                
        function checkKey(e) {
            e = e || window.event;

            if (e.keyCode == '37') {
                // flecha izquierda
                Inum--;
                img.src = 'img/img'+Inum+'.png';
            }
            else if (e.keyCode == '39') {
                // flecha derecha
                Inum++;
                img.src = 'img/img'+Inum+'.png';
            }
        }

        // Cambiar imagen con los botones
        boton1.onclick = function() {  
            img.src = 'img/img'+Inum+'.png';
            Inum--; 
        };
        boton2.onclick = function() {  
            img.src = 'img/img'+Inum+'.png';
            Inum++; 
        };

    </script>
</body>
<body>
    <script type="text/javascript">

        // Creación de los elementos html
        var boton1 = document.createElement("button");
            boton1.innerHTML = "<";
            boton1.style.width = "100px";
        var boton2 = document.createElement("button");
            boton2.innerHTML = ">";
            boton2.style.width = "100px";
        var br = document.createElement("br");
        var img = document.createElement("img");
            img.height = 100;
            img.width = 200;
        var Inum = 1;

        // Inserción de los elementos html
        document.body.appendChild(img);
        document.body.appendChild(br);
        document.body.appendChild(boton1);
        document.body.appendChild(boton2);

        // Cambiar imagen con las flechas del teclado
        document.onkeydown = checkKey;                
        function checkKey(e) { 

            // Compatibilidad con navegadores
            e = e || window.event;

            if (e.keyCode == '37') {
                // flecha izquierda
                if (Inum >= 2){Inum--} // controla que Inum sea superior a 1 (img0 no existe)
                img.src = 'img/img'+Inum+'.png';
            }
            else if (e.keyCode == '39') {
                // flecha derecha
                if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes (uso: si hay 10 img usar el número 9)
                img.src = 'img/img'+Inum+'.png';
            }
        }

        // Cambiar imagen con los botones
        boton1.onclick = function() {
            // imagen anterior
            if (Inum >= 2){Inum--} // controla que Inum sea superior a 1
            img.src = 'img/img'+Inum+'.png';
        };
        boton2.onclick = function() {
            // imagen siguiente
            if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes
            img.src = 'img/img'+Inum+'.png';
        };

    </script>
</body>
Origen Enlace
Ariel Montes
  • 2.4k
  • 1
  • 10
  • 30

Hay algunas cosas que faltan. Te dejo un código donde se puede cambiar imágenes con las flechas del teclado o clicando en los botones. Las imágenes deben encontrarse al interno de una carpeta llamada img y deben llamarse img1.png, img2.png, etc.

Consejo: Te lo dejo como ejemplo, pero aunque tu profesor te dé 10 puntos, tener estos conocimientos vale más que una nota. El ejercicio es muy fácil de hacer y debes tomar mi ayuda como una guía para seguir mejorando no para hacer tu vida escolar más fácil para que la laboral luego te sea imposible. Todos hemos estado ahí, así que ¡animo! y a seguir estudiando.

<body>
    <script type="text/javascript">

        var boton1 = document.createElement("button");
            boton1.innerHTML = "<";
            boton1.style.width = "100px";
        var boton2 = document.createElement("button");
            boton2.innerHTML = ">";
            boton2.style.width = "100px";
        var br = document.createElement("br");
        var img = document.createElement("img");
            img.height = 100;
            img.width = 200;
        var Inum = 1;

        document.body.appendChild(img);
        document.body.appendChild(br);
        document.body.appendChild(boton1);
        document.body.appendChild(boton2);
        
        // Cambiar imagen con las flechas del teclado
        document.onkeydown = checkKey;                
        function checkKey(e) {
            e = e || window.event;

            if (e.keyCode == '37') {
                // flecha izquierda
                Inum--;
                img.src = 'img/img'+Inum+'.png';
            }
            else if (e.keyCode == '39') {
                // flecha derecha
                Inum++;
                img.src = 'img/img'+Inum+'.png';
            }
        }

        // Cambiar imagen con los botones
        boton1.onclick = function() {  
            img.src = 'img/img'+Inum+'.png';
            Inum--; 
        };
        boton2.onclick = function() {  
            img.src = 'img/img'+Inum+'.png';
            Inum++; 
        };

    </script>
</body>