如何使用next和prev按钮在缩略图面板中偏移图像使用核心javascript

Question

我正在构建照片库 - 一种简单的照片库，它具有大尺寸图像的div和div下面的div这有5个缩略图。这个较低的div将有一个左右箭头图像适当放置，点击后将偏移缩略图容器并带入下5个缩略图。当然，在点击缩略图时，上面div中的大图也会改变以反映正确的图像。

我知道这很简单，可以使用像jquery等库一样建立更好的画廊。但是我正在学习Javascript，并且想要学习它，而不是马上使用这些优秀的图书馆。

我在开发“抵消”部分时遇到了问题。如何跟踪包含在缩略图容器中的第一个和最后一个缩略图，以便左右箭头键可以偏移并适当地显示缩略图？

此外，请指导我使用任何资源，让我开发这样的基于缩略图的画廊，而无需使用像jquery这样的库。我不想要任何奇特的效果/幻灯片播放的东西，只是一个简单优雅的静态画廊会做的。

谢谢！

Answer 1

您可以使用element.firstChild和element.lastChild找到您的div中的第一个和最后一个孩子（缩略图）。