用js实现一个页面可以用键盘左右方向键控制两张图片切换

两张图片在同一个位置,可以是替换或者覆盖。要求使用原生JS
2025-05-11 08:44:25
推荐回答(2个)
回答(1):

用js的 event.keyCode来获取方向键。

从网上你可以查到左右方向键对应的keyCode值,这样你就能获取到左右键点击事件了。
然后当左右键点击的时候,触发显示和隐藏对应图片的功能。
图片的显示和隐藏,你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了

回答(2):

支持多张图片




    循环
    



    
        
        
        
    

    
        var n = 0;
        var arr = document.getElementsByTagName('img');
        document.onkeydown = function (event) {
            for (var i = 0; i < arr.length; i++) {
                arr[i].style.display = 'none';
            }
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 37) { // 按 <-
                n--;
                if (n < 0) {
                    n = arr.length - 1;
                }
            }
            if (e && e.keyCode == 39) { // 按 -> 
                n++;
                if (n >= arr.length) {
                    n = 0;
                }
            }
            arr[n].style.display = 'block';
        };
    


相关问答