Javascript 图像数组和箭头键

我只是想了解一下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>

imgs=Array（“01.jpg”、“02.jpg”、“03.jpg”、“04.jpg”、“05.jpg”）；
var x=0；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='37'）{
document.getElementById（“myImage”）.src=imgs[--x]；
}
否则如果（e.keyCode=='39'）{
document.getElementById（“myImage”）.src=imgs[++x]；
}
}

在身体里

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

它应该做的是制作一个适合屏幕宽度的简单图像库，可以使用箭头键从阵列中的图像导航。至少对我来说，它工作得很好，除了这样一个事实：如果我试图在x=0时转到上一个图像，或者从x=4转到下一个图像，它将无限期地扩展，而不是从05.jpg循环回01.jpg，反之亦然。我的理论行不通。我只知道这件事的点点滴滴。有人知道一个简单的方法，用最少的修改这个原始脚本

---

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

我认为这应该可以做到：

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

imgs=Array（“01.jpg”、“02.jpg”、“03.jpg”、“04.jpg”、“05.jpg”）；
图像的变量数量=imgs.length
var x=0；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='37'）{
如果（x==0）
x=图像的数量-1；
其他的
x--；
}
否则如果（e.keyCode=='39'）{
if（x==（图像的数量-1））
x=0；
其他的
x++；
}
document.getElementById（“myImage”）.src=imgs[x]；
}

检查代码中的

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

，也称为第一个索引。

在任何方向上，

--x

和

++x

递减和递增都不会停止，如果您希望将它们包装，则在更改它们时使用模。模是除法的余数。如果除以数组中的元素总数并取余数，则将使您保持在边界内

x=（（x-1）+imgs.length）%imgs.length

或

x=（x+1）%imgs.length

为了简单起见，将图像的var number_更改为var y，但确实有效。谢谢：DSimplicity会毁了你的代码。考虑到你刚刚掌握了诀窍，同时也掌握了正确命名变量、函数等的诀窍。不要像这样：“这只是为了让我了解它的作用”。花几毫秒的时间给东西起个有意义的名字。以后你会很感激的：P以后可能会。当然，我明白你的意思，如果我做了一个大项目，我会被大量标有“y”、“z”、“s”的无意义变量所迷惑，如果我把它变成一个习惯，一个像内联js一样坏的习惯？谢谢你的警告；“imgTotal”听起来怎么样？哦，如果你有时间，你能解释一下“e=e | | window.event”吗？我的剧本没有那个。。。我没有完全理解这一部分，ehe:'t

e=e | | window.event

是为了浏览器兼容性。在某些情况下（大多数情况下），事件作为参数传递给回调，在其他情况下（即我认为），事件是放置在窗口对象上的全局状态。可以这样做吗？var y=imgs.length函数checkKey（e）{e=e | | window.event；if（e.keyCode='37'）{if（x==0）x=y document.getElementById（“myImage”）.src=imgs[--x]；}否则if（e.keyCode='39'）{if（x==y-1）x=-1 document getElementById（“myImage”）.src=imgs[++x]；}那么您只是将

imgs.length

替换为

y

？是的，你能做到。事实上，这比我的结果要好，因为你只需要调用那个操作一次，而不是每次。嗯。。。谢谢。但是你所说的“在代码中检查”到底是什么意思呢？只要使用

if

语句检查

x

是否满足这些条件之一就行了。你能解释一下“e=e | | window.event”吗？我的剧本没有那个。。。不知什么原因，这是一条无用的线路吗？我不太明白那部分的意思。他说：“我确信它是有效的，但这可能是。。。缩小尺寸还是什么D不过还是谢谢你。

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

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