时间戳

首页 > 解决方案 > 从可滚动的图像列表中获取当前图像

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

问题描述

我有可滚动图像列表（示例），我试图找出屏幕上显示的当前图像。

这个想法是聚焦当前图像缩略图。这是我的代码（我正在使用 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}

标签： javascripthtmlcss

解决方案

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

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

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

推荐阅读