图像阵列和箭头键

Image Array and Arrow Keys

本文关键字：阵列 图像      更新时间：2023-09-26

我只是想了解一下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.jpg循环回01.jpg，反之亦然。我的理论不起作用。我对这件事一知半解。有人知道对这个原始脚本进行最少修改的简单方法吗？

它不一定要看起来专业或"漂亮"。我只是无聊，到处试验。也许未来想成为一名网页设计师，但现在肯定不会：哦，请不要引用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>

检查代码中的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，也就是第一个索引。

<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];}}
相关文章：