图像数组和箭头键

Question

我只想尝试一下javascript，这是一个我从各种来源组装的脚本，只是简单到足以让我能理解它的水平。 请不要太复杂，但如果你这样做，我会很感激小解释，不要指望我知道......

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

在身体里......

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

它应该做的是制作一个适合屏幕宽度的图像的简单图像库，可以使用箭头键从数组中的图像导航。 它至少对我来说很好，除了如果我试图在x = 0时转到上一个图像，或者从x = 4转到下一个图像，它会无限延伸，而不是从05循环回到01.jpg。 jpg，反之亦然。 我的理论不起作用。 我对此知之甚少。 对这个原始脚本的修改最少，有人知道一个简单的方法吗？

它不必看起来很专业或“漂亮”。 我只是觉得无聊，并且在试验。 也许未来成为网页设计师的愿望，但现在肯定不是：D哦，请不要JQuery引用？ 当然它们有效，但我只想在基本层面上理解这个解决方案，并获得一个独立的脚本。

Answer 1

我认为这应该可以解决问题：

<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

检查代码中是否x == 0或x == imgs.length - 1并进行相应调整：

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];
    }
}

因此，在第一种情况下递减（ x-- ）将使您处于最后一个索引，而在第二种情况下递增（ ++x ）将使您处于0 ，即第一个索引。

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>

相同的东西只有更小（1行）

 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];}}