图像阵列和箭头键

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

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");
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>