从可滚动的图像列表中获取当前图像

Question

我有一个可滚动图像列表(示例)，我试图找出哪个是屏幕显示的当前图像。

这个想法是聚焦当前的图像缩略图。下面是我的代码(我使用的是Smarty TE):

{if $images}
<div class="galleryHolder left">
<div class="thumbsHolder left">
<div class="pos-sticky">
{section name=i loop=$images}
<a href="/files/{$images[i].file}" data-fancybox="gallery" class="thumb">
<picture>
<source srcset="/files/webp/tntn/{$images[i].file_webp} 1x" type="image/webp">
<source srcset="/files/tntn/{$images[i].file} 1x" type="image/jpeg">
<img class="thumbImg" src="/files/tntn/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
</picture>
</a>
{/section}
</div>
</div>
<div class="imagesHolder right">
{section name=i loop=$images}
<a href="/files/{$images[i].file}" data-fancybox="gallery" class="full">
<picture>
<source srcset="/files/webp/{$images[i].file_webp} 1x" type="image/webp">
<source srcset="/files/{$images[i].file} 1x" type="image/jpeg">
<img class="fullImg" src="/files/{$images[i].file}" alt="{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}">
</picture>
</a>
{/section}
</div>
</div>
{/if}

Answer 1

如果你在每个图像上放置一个intersectionObserver，那么当它进入和离开视窗时，你会收到通知。

在回调函数中，你可以在缩略图上设置一个类，分别突出显示或不突出显示。

如果你需要更多的代码帮助，请告诉我。