Javascript 在缩略图库中使用箭头键导航

我不久前制作了这个图像库，现在有了一个想法，如果你能用箭头键（左键和右键）在其中导航，那就太好了。 由于我对编程比较陌生，我无法让它与我在论坛上找到的东西一起工作。 如果有人能帮忙，我会非常高兴：）

在底部有一个指向JSFIDLE上的库的链接

下面是画廊的样子：

文档标题中的javascript：

    function reset()
            {
            var imgs = document.getElementsByTagName('img');
            }

        function init()

                {document.getElementById('img1');}

                window.onload = init;

CSS：

                #large  {
                        width:820px; 
                        height:619px; 
                        background:url(image_I_820x619.jpg) 
                        no-repeat center;}



          .thumb66x50   {
                        width:66px; 
                        height:50px;}

以及图像库的主体：

<div id="large"></div>          

<img id="img1" src="thumbnail_image_I.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_I_820x619.jpg)';">

<img id="img2" src="thumbnail_image_II.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_II_820x619.jpg)';">

以下是JSFIDLE上的图库： （奇怪的是，如果我把javascript放在html面板中，它只能在那里工作…）

---

解决方案的另一种选择是将JS逻辑保留在一个地方。以下内容适用于任意数量的缩略图

（函数（）{
设lg=document.querySelector（“#large”），
sm=document.queryselectoral（“[data bg]”），
setBg=（el=sm[0]）=>lg.style.backgroundImage=`url（'${el.dataset.bg}'）`；
Array.from（sm）.forEach（（el）=>el.addEventListener（“单击”，setBg.bind（this，el））；
setBg（）；
}());
#大型{
高度：130像素；
背景：#000无50%50%/封面；
过渡：0.3s；
}
[数据背景]{
高度：50px；
光标：指针；
}

您的多媒体资料不起任何作用。什么是
imgs[i]？HTML在哪里？CSS在哪里。。。请创建一个你所拥有的图片库，并尽你所能描述什么是错误的，什么是你想要的画廊行为。如果您有问题，请使用编辑器中的
按钮创建代码段。谢谢您的帖子！代码现在显示正确，我让图库在JSFIDLE上工作：）我把链接放在了原始文章中。我还删除了{imgs[I]；}，这是一些鼠标悬停效果的剩余部分用于？JS部分实际上在做什么？对我来说毫无意义。真是一团糟