Image Array and Arrow Keys

Question

I'm just trying to get a hang of javascript, and this is a script I assembled from various sources, just simple enough so I can understand on the level it is. Please don't get too complex, though if you do I would appreciate small explanation and don't expect me to know...

<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%">

What it's supposed to do is make a simple image gallery of images that fit to the screen width, which can be navigated from the images in the array using arrow keys. It works fine, for me at least, except the fact that if I try to go to the previous image while x=0, or the next image from x=4, it extends indefinitely, not looping back to 01.jpg from 05.jpg and vice versa as I want. My theory didn't work. I just know bits and pieces about this. Anybody know an easy way to with the least modification to this original script?

It doesn't have to look professional or 'pretty'. I'm just bored, and experimenting around. Maybe future aspirations to be a web designer, but not for now certainly :D Oh, and please no JQuery referencing? Sure they work, but I just want to understand a solution to this on a basic level, and get a standalone script.

Answer 1

I think this should do the trick:

<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

Check if x == 0 or x == imgs.length - 1 in your code and adjust accordingly:

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

So decrementing ( x-- ) in the first case will put you at the last index, and incrementing ( ++x ) in the second case will put you at 0 , aka the first index.

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>

SAME THING ONLY SMALLER (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];}}