Javascript 如何通过在JQuery中选择项在另一个div的数组中滚动项

我用CSS和html建立了一个图库。我使用JQuery构建了一个lightbox效果，这样当我点击一个较小版本的图像时，它就会在lightbox中打开。所有的缩略图都在一个容器div中，每个都在自己的div中。我无法正常工作的是滚动到下一个图像。我有一个数组，它会拉取所有的div图像，但是当我点击滚动而不是滚动图片时，它会使其他div消失。任何帮助都将不胜感激。我不熟悉JQuery和javascript

更新：我已经更新了HTML，以便在演示中显示图像。如您所见，如果单击图像，将打开一个灯箱，并放大图像。当您单击箭头时，它将隐藏下方的div和图像，而不是转到下一个图像

$（文档）.ready（函数（）{
$（“img”）。单击（函数（）{
$src=$（this.attr（“src”）；
$title=$（this.attr（“title”）；
$alt=$（this.attr（“alt”）；
如果（！$（“#灯箱”）。长度>0）{
$（'body'）。追加（“X>
$（文档）.ready（函数（）{
//首先获取所有lightbox图像的数组
var$images=$（“div.lightboxsm img”）；
//上述数组中当前图像的索引
var指数；
//然后为它们分配一个单击事件
$images.每个（功能（i、img）{
$（img）。单击（函数（）{
showImage（i）；//此行使用闭包，请在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
});
});
//该函数将获取索引，然后在lightbox中显示$images中对应的图像
函数showImage（i）{
index=i；//设置索引
if（index<0）return；//或者if（index<0）index=$images.length-1；//如果要循环
if（index>=$images.length）返回；//或者if（index>=$images.legth）index=0；//如果要循环
//将灯箱图像的src设置为与当前图像相同的src
$（“#lightbox img”）.attr（“src”），$images.eq（index.attr（“src”））；
//如果要循环，请删除以下两行
if（index==0）$（“#lightbox.previmg”）.hide（）；
else$（“#lightbox.previmg”）.show（）；
//如果要循环，请删除以下两行
如果（i=$images.length-1）$（“#lightbox.nextimg”）.hide（）；
else$（“#lightbox.nextimg”）.show（）；
$（“#lightbox”）.show（）；
}
//初始化lightbox元素（如果不存在）（只执行一次，而不是每次单击图像时执行）
if（！$（“#灯箱”）.长度）{
$（“正文”）。附加（“十> 你的演示不起作用。请对项目的问题制作一个完整的、最少的、可验证的演示。不要只复制整个程序！阅读和理解你的问题是一门Microsoft课程。-谢谢，我没有复制整个内容。我只复制了该问题的相关代码。我已更新了带有图像的链接，以便他们能够理解现在就看。除了我想不出来的部分，其他都一样。