Javascript 单击箭头更改图像

我正在设置可以用箭头点击的图像。目前我所有的图像都是通过一个循环和一个数组显示的。我已经能够设置它，这样当你在一个小图像预览上悬停时，主图像将更改为该图像。也就是说，您可以将鼠标悬停在它们上以查看更大的版本

我正试图用照片侧面的箭头做同样的事情，但我做得不够。如何更改代码以允许使用箭头更改图像

谢谢你的帮助

//显示图像

             <% var imgsrc = awspath + listings.currentimages[0] %>
            <img  id='mainPicture' class="image-resposive" src=<%=imgsrc%>>

                <div id='allimages'>
                 <% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
                  <div class='smallerImages'>
                     <% var imgsrc = awspath + listings.currentimages[i] %>
                  <img class="small" src="<%= imgsrc %>">

                </div>
                <% } %>
                </div> 

---

在文档元素上使用jQuery

keydown

事件。只是一个快速演示：

功能选择图像（img）{
$（“.small”）.removeClass（“selectedImage”）；
var src=$（img）.attr（“src”）；
$（img）.addClass（“SelecteImage”）；
$（“#主图片”）.attr（“src”，src）；
}
$（“.small”）.hover（函数（）{
选择图像（本）；
});
$（文档）.keydown（函数（e）{
开关（e.which）{
//左
案例37：
var prev=$（.selectedImage”）.prev（.small）；
如果（！上一个长度）{
prev=$（“#allimages”）.find（“.small:最后一个孩子”）；
}
选择图像（上一个）；
打破
//对
案例39：
var next=$（.selectedImage”）.next（.small）；
如果（！next.length）{
next=$（“#allimages”）.find（“.small:第一个孩子”）；
}
选择图像（下一步）；
打破
默认：返回；
}
//阻止默认操作（滚动/移动插入符号）
e、 预防默认值（）；
});
.small{
边框：实心2px透明；
}
。选择图像{
边框：纯色2px蓝色；
}
在文档元素上使用jQuery
keydown
事件。只是一个快速演示：


功能选择图像（img）{
$（“.small”）.removeClass（“selectedImage”）；
var src=$（img）.attr（“src”）；
$（img）.addClass（“SelecteImage”）；
$（“#主图片”）.attr（“src”，src）；
}
$（“.small”）.hover（函数（）{
选择图像（本）；
});
$（文档）.keydown（函数（e）{
开关（e.which）{
//左
案例37：
var prev=$（.selectedImage”）.prev（.small）；
如果（！上一个长度）{
prev=$（“#allimages”）.find（“.small:最后一个孩子”）；
}
选择图像（上一个）；
打破
//对
案例39：
var next=$（.selectedImage”）.next（.small）；
如果（！next.length）{
next=$（“#allimages”）.find（“.small:第一个孩子”）；
}
选择图像（下一步）；
打破
默认：返回；
}
//阻止默认操作（滚动/移动插入符号）
e、 预防默认值（）；
});
.small{
边框：实心2px透明；
}
。选择图像{
边框：纯色2px蓝色；
}

您所说的带箭头的
到底是什么意思？按右/左箭头可转到阵列中的下一个图像。您指的是键盘箭头吗？请检查我的answer@BraianMellor我确实这么做了，但我很想通过点击屏幕上的箭头来看看它是如何工作的。有什么建议吗？谢谢你的帮助！您所说的带箭头的
是什么意思？按右/左箭头可转到阵列中的下一个图像。您是指键盘箭头吗？请检查我的answer@BraianMellor我确实这么做了，但我很想通过点击屏幕上的箭头来看看它是如何工作的。有什么建议吗？谢谢你的帮助！也可以使用可点击的箭头来实现这一点吗？谢谢你的帮助！你所说的“可点击”是什么意思？意思是你在屏幕上点击的箭头。在这篇帖子上找到了答案。再次感谢你的帮助！也可以使用可点击的箭头来实现这一点吗？谢谢你的帮助！你所说的“可点击”是什么意思？意思是你在屏幕上点击的箭头。在这篇帖子上找到了答案。再次感谢你的帮助！
  $('.small').hover(function() {
   $('.small').removeClass('selectedImage')
   var src = $(this).attr('src');
   $(this).addClass('selectedImage')
   $('#mainPicture').attr('src', src);
   });