怎么用原生JavaScript写一个切换背景的键盘事件

1、背景是一张图片，内容也是一张图片

2、通过上下左右切换内容的背景

img

只能写到这了，下面就没思路了
img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: #ccc;
        }

        #top {
            position: absolute;
            top: 80px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #bottom {
            position: absolute;
            top: 200px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #left {
            position: absolute;
            top: 140px;
            left: 80px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #right {
            position: absolute;
            top: 140px;
            left: 200px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }

        #center {
            position: absolute;
            top: 140px;
            left: 140px;
            width: 50px;
            height: 50px;
            border: 3px solid #ccc
        }
    </style>
</head>

<body>
    <div id="top">top</div>
    <div id="bottom">bottom</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="center" class="active">center</div>
    <script>
        var divTop = document.getElementById('top')
        var divBottom = document.getElementById('bottom')
        var divLeft = document.getElementById('left')
        var divRight = document.getElementById('right')
        var divCenter = document.getElementById('center')
        function cc() {
            var arr = document.getElementsByTagName('div')
            for (var i = 0; len = arr.length, i < len; i++) {
                arr[i].className = "";
            }
        }
        document.onkeydown = function (event) {
            var id = document.getElementsByClassName('active')[0].id
            switch (event.keyCode) {
                case 37:
                    console.log('左');
                    console.log(id);
                    if (id == 'center') {
                        cc()
                        divLeft.className = 'active'
                    } else if (id == 'right') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 38:
                    console.log('上');
                    console.log(id);

                    if (id == 'center') {
                        cc()
                        divTop.className = 'active'
                    } else if (id == 'bottom') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 39:
                    console.log('右');
                    console.log(id);

                    if (id == 'center') {
                        cc()
                        divRight.className = 'active'
                    } else if (id == 'left') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
                case 40:
                    console.log('下');
                    console.log(id);
                    if (id == 'center') {
                        cc()
                        divBottom.className = 'active'
                    }
                    else if (id == 'top') {
                        cc()
                        divCenter.className = 'active'
                    } else {
                        return false
                    }
                    break;
            }
        }
    </script>
</body>

</html>

给你的37，38，39，40后的 break 前加一个修改图片的函数就行了
比如按左键要修改左边 div 的图片，那就在当用户按下左键时改变左边 div 里的 img 就可以了