Visual Matrix and Directional Controls

Question

Visual Matrix and Directional Controls

I'm currently learning JavaScript and I've put together this script from different sources to help me grasp the basics. I prefer to keep it simple and would appreciate explanations if it gets too complex. Don't assume I know too much about it yet...

<script type="text/javascript" language="JavaScript>
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
var x=0;
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        document.getElementById("myImage").src=imgs[--x];
    }
    else if (e.keyCode == '39') {
        document.getElementById("myImage").src=imgs[++x];
    }
}
</script>

and in the body...

<img id="myImage" src="01.jpg" style="width:100%">

The script is designed to create a basic image gallery that fits the screen width. You can navigate through the images in the array using the arrow keys. It works well for me, but I'm facing an issue where it doesn't loop back to the first or last image when reaching the end of the array. I'm still trying to figure it out with my limited knowledge. Any suggestions on how to tweak this script with minimal modifications?

I'm just experimenting and not aiming for a professional or polished look. Maybe I'll pursue web design in the future, but for now, I'm just having fun with this. Oh, and please refrain from using JQuery references. I want to understand the solution at a basic level and have a self-contained script.

javascript arrays image

Answer 1

Answer №1

This solution seems like it will get the job done:

<script type="text/javascript" language="JavaScript">
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
var number_of_images = imgs.length
var x=0;
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        if (x == 0) 
            x = number_of_images - 1;
        else
            x--;
    }
    else if (e.keyCode == '39') {
        if (x == (number_of_images - 1))
            x = 0;
        else
            x++;
    }
    document.getElementById("myImage").src=imgs[x];
}
</script>

Answer 2

This solution seems like it will get the job done:

<script type="text/javascript" language="JavaScript">
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
var number_of_images = imgs.length
var x=0;
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        if (x == 0) 
            x = number_of_images - 1;
        else
            x--;
    }
    else if (e.keyCode == '39') {
        if (x == (number_of_images - 1))
            x = 0;
        else
            x++;
    }
    document.getElementById("myImage").src=imgs[x];
}
</script>

Answer 3

Answer №2

Ensure your code accounts for whether x is equal to 0 or imgs.length - 1, and make the necessary adjustments:

function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        if (x == 0) x = imgs.length
        document.getElementById("myPic").src=imgs[--x];
    }
    else if (e.keyCode == '39') {
        if (x == imgs.length - 1) x = -1
        document.getElementById("myPic").src=imgs[++x];
    }
}

By decrementing (x--) in the first scenario, you'll reach the last index. And by incrementing (++x) in the second scenario, you'll land at 0, which is the first index.

Answer 4

Ensure your code accounts for whether x is equal to 0 or imgs.length - 1, and make the necessary adjustments:

function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        if (x == 0) x = imgs.length
        document.getElementById("myPic").src=imgs[--x];
    }
    else if (e.keyCode == '39') {
        if (x == imgs.length - 1) x = -1
        document.getElementById("myPic").src=imgs[++x];
    }
}

By decrementing (x--) in the first scenario, you'll reach the last index. And by incrementing (++x) in the second scenario, you'll land at 0, which is the first index.

Answer 5

Answer №3

<script type="text/javascript" language="JavaScript">
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
console.log(imgs.length);
var x=0;
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {        
        x--;
        if(x == -1){ x = imgs.length - 1; console.log('a max'); }
        //document.getElementById("myImage").src=imgs[x];
        console.log('a '+x);

    }
    else if (e.keyCode == '39') {       
        x++;
        if(x == imgs.length){ x = 0; console.log('b max'); }
        //document.getElementById("myImage").src=imgs[x];
        console.log('b '+x);     
    }
}
</script>

REDUCED FORM (1 line)

 i=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");var x=0;document.onkeydown=checkKey;function checkKey(e){e=e||window.event;if(e.keyCode=='37'){x--;if(x==-1){x=i.length-1;}document.getElementById("myImage").src=i[x];}else if(e.keyCode=='39'){x++;if(x==i.length){x=0;}document.getElementById("myImage").src=i[x];}}

Answer 6

<script type="text/javascript" language="JavaScript">
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
console.log(imgs.length);
var x=0;
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {        
        x--;
        if(x == -1){ x = imgs.length - 1; console.log('a max'); }
        //document.getElementById("myImage").src=imgs[x];
        console.log('a '+x);

    }
    else if (e.keyCode == '39') {       
        x++;
        if(x == imgs.length){ x = 0; console.log('b max'); }
        //document.getElementById("myImage").src=imgs[x];
        console.log('b '+x);     
    }
}
</script>

REDUCED FORM (1 line)

 i=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");var x=0;document.onkeydown=checkKey;function checkKey(e){e=e||window.event;if(e.keyCode=='37'){x--;if(x==-1){x=i.length-1;}document.getElementById("myImage").src=i[x];}else if(e.keyCode=='39'){x++;if(x==i.length){x=0;}document.getElementById("myImage").src=i[x];}}

Visual Matrix and Directional Controls

Answer №1

Answer №2

Answer №3

Similar questions

URL Construction with RxJS

I encountered an error of "Unexpected token '>'" while working with an

When the enter key is pressed, the form will be automatically submitted

Tips on creating a unique d3js tree design

Employing double quotes within JSON keys or values can help enhance the readability and

What is the best way to convert exponential values to decimals when parsing JSON data?

Upon refreshing the browser page, AngularJS fails to redirect to the default page as expected

I noticed a change in the state between dispatches, but I did not make any alterations to the state

The player remains unchanged

How can you prevent the browser from prompting to save your email and password when filling out a sign-up form?

Fix background transition and add background dim effect on hover - check out the fiddle!

Can the break statement be used in jQuery or JavaScript?

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Tips for resolving the Angular Firebase v.7 problem: The search for '_delegate' in the users/xxxxx cannot be conducted using the 'in' operator

Caution: PHP's move_uploaded_file() function is unable to successfully relocate the audio file

Updating the @mui/x-data-grid table dynamically upon fetching new data

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

Ways to showcase the object on the console

Enhancing Javascript with ES6 for nested for loop operations

The function within the React component is failing to produce the expected output